Dibujar líneas

facebook-svg gplus-svg twitter-svg

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 color de una línea
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
array
stroke-dasharray="5,5" Se utiliza para crear líneas discontinuas
stroke-dash
offset
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 el SVG "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 ).



    
    
    
	// las dos lineas finas			
    
    

// las dos lineas finas

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