SVG правоъгълник и други SVG фигури

Няколко фигури могат да бъдат създадени с помощта на SVG чертеж. Чертежът на SVG може да използва и комбинира седем фигури: Път, правоъгълник, кръг, елипса, линия, полилиния и многоъгълник.

Път

Най pathелемент е най-често се наблюдава и обикновено се генерира от програми, предназначени за износ, SVG код.

Примерът pathпо-горе ще генерира символ „плюс“ (+), когато се използва в SVG чертеж. SVG pathелементите не се изграждат ръчно, а се генерират чрез дизайнерски програми, които могат да манипулират векторни графики, като 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