Trazado en SVG
Aprende las propiedades de trazo SVG con ejemplos ejecutables: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset y más.
Estilizar contornos SVG con propiedades de trazo
El trazo de un elemento SVG es la pintura aplicada a lo largo del contorno de una forma, línea o texto — en contraste con el relleno, que pinta el interior. SVG ofrece una familia de propiedades stroke-* que controlan cada aspecto de ese contorno: su color, grosor, transparencia, cómo se terminan sus extremos, cómo se unen sus esquinas y si es sólido o discontinuo.
Estas propiedades son atributos de presentación, por lo que puedes establecerlas directamente en un elemento (stroke="purple") o mediante CSS (stroke: purple;). También se heredan, razón por la que es habitual definirlas una vez en un elemento <g> (grupo) y dejar que las formas hijas las adopten.
Este capítulo cubre el conjunto completo de propiedades de trazo. Para las formas que trazarás, consulta SVG Path, SVG Line y SVG Text. Si eres nuevo en SVG, comienza con la Introducción a SVG y ten a mano la Referencia SVG para una consulta rápida de cada atributo.
Las propiedades de trazo de un vistazo:
stroke— el color (u otro tipo de pintura) del contorno.stroke-width— el grosor del contorno.stroke-opacity— la transparencia del trazo, de0a1.stroke-linecap— la forma dibujada en los extremos abiertos de una línea:butt,roundosquare.stroke-linejoin— la forma dibujada donde dos segmentos de línea se encuentran:miter,roundobevel.stroke-miterlimit— hasta cuánto puede extenderse una uniónmiterantes de convertirse enbevel.stroke-dasharray— el patrón de guiones y espacios para un contorno discontinuo.stroke-dashoffset— a qué distancia a lo largo del trazado comienza el patrón de guiones.
La propiedad stroke
La propiedad stroke establece el color del contorno. Acepta cualquier valor de color CSS — un color con nombre, un código hexadecimal, rgb(), hsl() o una referencia a un degradado o patrón. De forma predeterminada, las formas no tienen trazo (none), por lo que no se dibuja nada hasta que se defina uno.
En el ejemplo siguiente, fill="none" está establecido en el grupo para que solo sean visibles los contornos, y cada trazado recibe un color de trazo diferente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
Sorry, your browser doesn't support inline SVG.
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>El texto "Sorry, your browser doesn't support inline SVG." es contenido de reserva. Debe ser un nodo de texto hijo directo del elemento <svg> para que los navegadores sin soporte de SVG en línea lo muestren en lugar del gráfico. Los navegadores modernos lo ignoran y renderizan el SVG.
La propiedad stroke-width
La propiedad stroke-width establece el grosor del contorno. El trazo se dibuja centrado sobre el trazado, de modo que la mitad de su ancho se sitúa a cada lado de la línea geométrica.
Un número por sí solo se interpreta en unidades de usuario (el sistema de coordenadas SVG) — stroke-width="5" y stroke-width="5px" son equivalentes en un SVG simple. También puedes usar unidades CSS explícitas (px, em, pt) o un porcentaje, que se resuelve respecto a la diagonal del viewport SVG en lugar de su anchura o altura.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propiedad stroke-opacity
La propiedad stroke-opacity controla la transparencia del trazo de forma independiente a la opacidad del relleno. Acepta un número de 0 (completamente transparente) a 1 (completamente opaco); un valor como 0.5 hace que el trazo sea semitransparente. Es útil para superponer contornos o dejar que el fondo se vea a través de un contorno sin afectar el relleno de la forma.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="purple" stroke-width="8">
<path stroke-opacity="1" d="M5 30 l215 0" />
<path stroke-opacity="0.5" d="M5 60 l215 0" />
<path stroke-opacity="0.2" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propiedad stroke-linecap
La propiedad stroke-linecap define la forma dibujada en los extremos abiertos de un trazado con trazo. Acepta tres valores:
butt(el predeterminado) — el trazo se detiene exactamente en el punto final del trazado con un borde plano y sin extensión. La longitud dibujada es igual a la longitud geométrica del trazado.round— se añade una semicircunferencia cuyo radio es la mitad del ancho del trazo en cada extremo, de modo que la línea se extiende más allá del punto final enstroke-width / 2y termina en una curva suave.square— se añade un remate plano que se extiende más allá del punto final enstroke-width / 2. Visualmente se parece abuttpero es más largo; la extensión extra en cada extremo es la misma que enround, solo que con un borde plano en lugar de uno curvo.
La diferencia es más visible con un trazo grueso. Observa cómo las líneas round y square a continuación parecen ligeramente más largas que la línea butt, aunque los tres trazados comparten las mismas coordenadas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propiedad stroke-linejoin
La propiedad stroke-linejoin define la forma usada donde dos segmentos de línea de un trazado se encuentran — las esquinas. Acepta tres valores comunes:
miter(el predeterminado) — los bordes exteriores de los dos segmentos se extienden hasta que se encuentran en un punto agudo.round— la esquina se redondea con un arco.bevel— la esquina se corta con un borde plano.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="orange" stroke-width="12">
<path stroke-linejoin="miter" d="M15 90 L40 20 L65 90" />
<path stroke-linejoin="round" d="M105 90 L130 20 L155 90" />
<path stroke-linejoin="bevel" d="M185 90 L210 20 L235 90" />
</g>
</svg>
</body>
</html>La propiedad stroke-miterlimit
Cuando stroke-linejoin es miter, los ángulos muy agudos pueden producir puntas extremadamente largas y puntiagudas. La propiedad stroke-miterlimit limita cuánto puede crecer dicha punta. Establece la razón máxima permitida entre la longitud del inglete y el ancho del trazo, donde la longitud del inglete es la distancia desde la esquina interior hasta el extremo exterior del punto. Si la razón de una unión supera el límite, esa unión se convierte silenciosamente en un bevel.
El valor predeterminado es 4, lo que significa que un inglete puede extenderse hasta cuatro veces el ancho del trazo antes de cortarse (esto preserva el punto para cualquier ángulo de esquina de aproximadamente 29° o mayor). Cuanto más aguda sea la esquina, más largo será el inglete, por lo que cuanto menor sea el límite, mayor será el ángulo en el que las esquinas empiezan a convertirse en bisel. Un límite de 1 aplica bisel a casi todas las esquinas que no sean líneas rectas; un límite grande como 10 permite incluso puntas muy agudas. El valor debe ser al menos 1.
En el ejemplo siguiente, ambos trazados forman el mismo pico agudo, pero el de la izquierda (stroke-miterlimit="1") se convierte en bisel mientras que el de la derecha (stroke-miterlimit="10") conserva su punta.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="120">
<g fill="none" stroke="purple" stroke-width="10" stroke-linejoin="miter">
<path stroke-miterlimit="1" d="M20 100 L45 25 L70 100" />
<path stroke-miterlimit="10" d="M120 100 L145 25 L170 100" />
</g>
</svg>
</body>
</html>La propiedad stroke-dasharray
La propiedad stroke-dasharray convierte un contorno sólido en uno discontinuo. Su valor es una lista de números separados por comas o espacios que describen las longitudes de los guiones y los espacios, aplicados de forma alternada a lo largo del trazado:
- Un valor único como
stroke-dasharray="10"produce guiones y espacios de igual longitud (10,10). - Dos valores como
stroke-dasharray="3,5"significan un guión de3unidades seguido de un espacio de5unidades, repetidos. - Con un número par de valores, la lista se usa tal cual y se repite.
Si se proporciona un número impar de valores, SVG repite la lista una segunda vez para hacerla par, de modo que los roles de guión y espacio se alternan. Por ejemplo, stroke-dasharray="30,15,10,10,10,15" se lee como un patrón de guión-30, espacio-15, guión-10, espacio-10, guión-10, espacio-15, y luego se repite en ciclos.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>La propiedad stroke-dashoffset
La propiedad stroke-dashoffset desplaza el punto de inicio del patrón de guiones a lo largo del trazado. Un valor de 0 (el predeterminado) inicia el patrón en el punto de inicio del trazado; un valor positivo mueve el punto de inicio hacia adelante a lo largo del trazado, mientras que un valor negativo lo mueve hacia atrás. Esto es lo que permite animar efectos de "hormigas marchantes" o de dibujo de líneas cambiando gradualmente el desplazamiento.
En el ejemplo siguiente, las tres líneas comparten el mismo patrón de guiones pero lo inician con diferentes desplazamientos, por lo que los guiones aparecen desplazados entre sí.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen" stroke-width="5" stroke-dasharray="20,10">
<path stroke-dashoffset="0" d="M5 30 l215 0" />
<path stroke-dashoffset="10" d="M5 60 l215 0" />
<path stroke-dashoffset="20" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>Animación con stroke-dashoffset
Dado que el desplazamiento puede animarse, stroke-dashoffset es la base de dos efectos populares:
- Hormigas marchantes — anima el desplazamiento a través de un período completo del guión para que los guiones parezcan desplazarse a lo largo del contorno (como el marquesina de selección).
- Dibujo de líneas — establece
stroke-dasharrayigual a la longitud total del trazado para que todo el trazado se convierta en un largo guión, y luego anima el desplazamiento desde esa longitud hasta0para que la línea parezca dibujarse sola.
El CSS a continuación produce el efecto de hormigas marchantes. La animación va de un desplazamiento de 0 a 30 (la longitud de un ciclo completo de guión más espacio de 15,15), lo que hace que el bucle sea continuo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ants {
stroke: purple;
stroke-width: 3;
fill: none;
stroke-dasharray: 15, 15;
animation: march 1s linear infinite;
}
@keyframes march {
to {
stroke-dashoffset: 30;
}
}
</style>
</head>
<body>
<svg width="220" height="120">
<rect class="ants" x="10" y="10" width="200" height="100" />
</svg>
</body>
</html>Para dibujar formas completas de esta manera, consulta SVG Path y SVG Line; la lista completa de atributos de trazo se encuentra en la Referencia SVG.