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-dash | arraystroke-dasharray="5,5" | Se utiliza para crear líneas discontinuas |
stroke-dash | offsetstroke-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
).