Dibujar una línea curva con SVG <polyline>

El elemento polyline es una forma básica de SVG, utilizado para crear una serie de líneas rectas que conectan varios puntos. Un polyline típico se utiliza para crear una forma abierta, donde el último punto no está conectado con el primer punto

Ejemplo de línea curva

Ejemplo de código de línea curva siguiente:

<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>

El efecto después de ejecutar es el siguiente:

Dibujar un triángulo

Ejemplo de código siguiente:

<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="trazo:#006600;"/>
</svg>

Vista previa del efecto después de ejecutar:

varias líneas identificadas por puntos. Cada punto se lista en la propiedad points como x, y. Este ejemplo tiene3puntos, que definen un triángulo.
Definir3puntos conectados por líneas, luego rellenar. El color de relleno predeterminado es negro.

Dibujar un triángulo relleno de verde.

Ejemplo de código siguiente:

<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="trazo:#006600;　stroke-width:　2;
　　　　　　　　　　　　　　　relleno:　#33cc33;"/>
</svg>

Vista previa del efecto después de ejecutar:

Usted puede haber notado que en el triángulo solo hay dos líneas dibujadas con el color del trazo (verde oscuro). La razón es que solo se dibujaron las líneas entre los puntos enumerados. No se dibujó la línea que regresa al primer punto. Para esto, points agrega el primer punto nuevamente al atributo, como se muestra a continuación:

<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="trazo:#006600;　relleno:　#33cc33;"/>
</svg>

La propiedad de estilo de este estilo establece el color y el grosor del trazo (línea) y el color de relleno.