Dibujar líneas
En el SGV el elemento <line> es utilizado para dibujar líneas.
Un ejemplo básico
La línea empieza en el punto x1,y1 y acaba en el punto x2,y2. El atributo stroke define el color, mientras que
el atributo stroke-width define el grosor de línea.
Atributos que pueden ser utilizados con <line>
| Atributo | ejemplo | Descripción |
|---|---|---|
| x1 | <line x1="10" y1="10" x2="200" y2="10" stroke="black" stroke-width="2" /> | La línea empieza en el punto x1,y1 y acaba en el punto x2,y2 |
| y1 | ||
| x2 | ||
| y2 | ||
| stroke | style = "stroke:rgb(255,0,0);" o stroke="red" |
Define el aspecto de una línea. Su valor puede ser un color, un degradado ( gradient ) o una imagen. |
| stroke-width | style = "stroke-width:2;" o stroke-width = "2" |
Define el grosor de una línea. |
| stroke-linecap | stroke-linecap="butt" |
Define diferentes tipos de terminaciones de un trazado posibles valores: butt | round | square |
| stroke-dasharray | stroke-dasharray="5,5" | Se utiliza para crear líneas discontinuas |
| stroke-dashoffset | stroke-dashoffset="50" | Especifica el desplazamiento inicial al crear líneas discontinuas |
| shape-rendering | shape-rendering="crispEdges" | otros posibles valores: auto | optimizeSpeed | crispEdges | geometricPrecision | inherits |
Como dibujar líneas finas
Por defecto SVG de HTML5 "suaviza" las líneas, y esto queda muy bien en las líneas oblicuas. Sin embargo las líneas horizontales y verticales parecen más gruesas de lo que son en realidad. Esto llega a ser muy evidente, incluso molesto, en líneas muy finas ( stroke-width = "1" ), por ejemplo la cuadricula de un gráfico.
La buena noticia es que podemos eludir este problema utilizando shape-rendering="crispEdges". Alternativamente podemos utilizar el método translate: transform="translate(.5,.5)".
Dar formato a las puntas de línea
Utilizando el atributo stroke-linecap podemos dar formato a las puntas de línea. Los valores que puede tomar stroke-linecap son
"butt" ( tope ), "round" ( redondeado ) y "square" ( cuadrado ).
Uniones de línea
Podemos dibujar un trazado en SVG conectando lineas y curvas. Al conectar dos líneas, exactamente como en canvas podemos escoger también el tipo de unión. Para esto utilizamos el atributo stroke-linejoin cuyas posibles valores son: bevel ( biselado ), round ( redondeado ) y miter ( en angulo ):
Dibujar líneas discontinuas
Dibujar líneas discontinuas en <svg> es fácil utilizando el atributo stroke-dasharray. Solo hay que definir una sucesión de números separados por comas que define
el patrón a seguir.
Por ejemplo si stroke-dasharray = "10, 5" la línea será compuesta por fragmentos de línea de 10px separados por espacios de 5px. Vea algunos ejemplos:
El atributo stroke-dashoffset
El atributo stroke-dashoffset especifica el desplazamiento inicial como en el siguiente ejemplo. Las tres líneas son iguales ( stroke-dasharray="50"; o sea líneas de 50 seguidas por espacios del mismo tamaño ) solo que la segunda línea tiene un desplazamiento inicial stroke-dashoffset = "50" y la tercera tiene un desplazamiento inicial stroke-dashoffset = "25".
Podemos utilizar el atributo stroke-dashoffset para crear una animación de tipo hormigas andadoras
Podemos utilizar el evento wheel junto con el atributo stroke-dashoffset para animar trazados SVG
Líneas punteadas en SVG
En CSS también podemos crear líneas discontinuas con border-style:dashed. Asimismo podemos dibujar líneas punteadas con border-style:dotted.
En SVG no tenemos ninguna propiedad que nos permita crear líneas punteadas pero podemos utilizar la propiedad stroke-dasharray junto con stroke-linecap: round.
Observe por favor que el primer valor de stroke-dasharray, el que define el fragmento de línea, es muy pequeño:
stroke-dasharray: 0.1 15;
y va seguido de un espacio ente las líneas bastante grande:
stroke-dasharray: 0.1 15;
¿Que pasa aquí? Prácticamente creamos un pequeño circulo utilizando una línea muy corta con puntas redondeadas. El diámetro del pequeño circulo es igual al ancho de línea utilizado ( stroke-width ).