Líneas en SVG. El elemento Line.
Para
poder crear líneas en SVG tenemos que utilizar la etiqueta básica
(o shape) LINE. Lo que necesitamos para pintar una
línea son dos cosas: la coordenada origen de la línea y la coordenada
destino. Para especificar dichos valores utilizaremos los atributos: x1,
y1, x2 e y2 de la siguiente forma:
- x1 = "coordenada", la coordenada de inicio en el eje X. En el caso de no ser especificado toma un valor de 0.
- y1 = "coordenada", la coordenada de inicio en el eje Y. En el caso de no ser especificado toma un valor de 0.
- x2 = "coordenada", la coordenada final en el eje X. En el caso de no ser especificado toma un valor de 0.
- y2 = "coordenada", la coordenada final en el eje Y. En el caso de no ser especificado toma un valor de 0.
La etiqueta line quedaría de la siguiente forma:
<LINE X1="coordenada" Y1="coordenada" X2="coordenada" Y2="coordenada"/>
Aunque las técnicas de colores, bordes y opacidad son genéricas para todas las formas básicas cabe mencionar que para modificar el ancho de una línea podemos utilizar el atributo stroke-width de la siguiente forma:
<LINE X1="coordenada" Y1="coordenada" X2="coordenada" Y2="coordenada" stroke-width="longitud"/>
Por defecto el valor de stroke-width es 1.
