Рисование кривой с помощью SVG <polyline>

Элемент polyline является одним из базовых форм SVG, используемых для создания последовательности прямых линий, соединяющих несколько точек. Типичный polyline используется для создания открытой формы, где последний пункт не соединяется с первым.

Пример ломаной линии

Пример кода для ломаной линии:

<svg　width="120"　height="120"　
　　　　　viewPort="0　0　120　120"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"
　　　　<polyline　fill="none"　stroke="black"　
　　　　　　　　　　　　　　points="20,100　40,60　70,80　100,20"/>
</svg>

Эффект после выполнения:

Рисование треугольника

Пример кода:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="0,0　　30,0　　15,30"
　　　　　　　　style="stroke:#006600;"/>
</svg>

Превью эффекта после выполнения:

Много линий обозначены точками. Каждая точка в свойстве points указывается с помощью x, y. В этом примере есть три точки, они определяют треугольник.
Соедините три точки линией, затем заполните. По умолчанию цвет заливки черный.

Рисование заполненного зеленым цвета треугольника

Пример кода:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline　points="10,2　　60,2　　35,52"
　　　　　　　　style="stroke:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　fill:　#33cc33;"/>
</svg>

Превью эффекта после выполнения:

Вы, возможно, уже заметили, что в треугольнике только две линии нарисованы цветом обводки (темно-зеленый). Причина в том, что нарисованы только линии между указанными точками. Линия, ведущая обратно к первому пункту, не нарисована. Для этого снова добавьте первый пункт в атрибут points, как показано ниже:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<polyline points="10,2 60,2 35,52 10,2"
　　　　　　　　style="stroke:#006600;　fill:　#33cc33;"/>
</svg>

Эта свойство style устанавливает цвет и толщину линии (пенки) и цвет заливки.