Прямокутник SVG та інші форми SVG

За допомогою креслення SVG можна створити кілька фігур. Малюнок SVG може використовувати та поєднувати сім фігур: контур, прямокутник, коло, еліпс, лінія, полілінія та багатокутник.

Шлях

pathЕлемент є найбільш часто зустрічається, і зазвичай створюється програмами , призначених для експорту SVG коди.

Наведений pathвище приклад генерує символ “плюс” (+) при використанні всередині креслення SVG. pathЕлементи SVG не будуються вручну, а генеруються за допомогою дизайнерських програм, які можуть маніпулювати векторною графікою, наприклад Illustrator або Inkscape.

Прямокутник

Елемент прямокутника rectмалює прямокутник на екрані та приймає шість атрибутів.

xі yпризначте положення лівого верхнього кута прямокутника, і widthі heightпризначте розмір прямокутника. rxі ryпризначити радіус кутів прямокутника, подібний до властивості CSS border-radius.

Коло

Елемент кола circleприймає три атрибути.

cxі cyприсвоїти положення центру кола, і rприсвоїти радіус (розмір) кола.

Еліпс

Еліпсовий елемент,, ellipseподібний до circleелемента, за винятком того, що радіус розділений на два атрибути.

Знову ж , cxі cyпризначити положення центру еліпса, а тепер rxі ryпризначити по горизонталі і вертикалі радіуса еліпса, відповідно. Більший rxдасть «жирний» еліпс, а більший ry- більш худий. Якщо rxі ryрівні, це утворить коло.

Лінія

lineЕлемент простий, і приймає чотири атрибута.

x1І y1атрибути призначити першу точку лінії, а також x2і y2атрибути призначити другу точку лінії.

Полілінія

A polyline- це ряд з'єднаних прямих ліній, призначених в одному атрибуті.

У pointsпривласнює атрибут список точок, кожна точка відокремлюється комою.

Багатокутник

polygonЕлемент також ряд з'єднаних прямих ліній, але в цьому випадку останній рядок буде автоматично підключиться до вихідної точки.

Цей приклад намалює ту саму фігуру, що і polylineвище, але він намалює додаткову лінію, щоб “закрити” ряд рядків.

Більше інформації

Документація MDN: MDN