Propiedad CSS stroke-dasharray
Cómo usar la propiedad CSS stroke-dasharray para crear líneas discontinuas en un elemento. Conoce la propiedad y sus valores con ejemplos.
La propiedad stroke-dasharray controla el patrón de trazos y espacios usado para pintar el contorno (stroke) de una forma SVG. En lugar de una línea continua, el trazo se divide en trazos y huecos alternados, lo que permite dibujar bordes discontinuos y punteados, separadores y las líneas utilizadas en animaciones de trazado.
Esta página explica cómo se interpreta la lista de valores, la regla de duplicación para recuentos impares que confunde a la mayoría, los casos de uso más comunes y cómo stroke-dasharray interactúa con propiedades relacionadas.
Cómo funciona la lista de valores
stroke-dasharray acepta none o un <dasharray> — una lista de longitudes o porcentajes separados por comas y/o espacios en blanco. Los números se leen en orden como trazo, hueco, trazo, hueco…, y la lista completa se repite a lo largo del trazado:
- Un valor —
4dibuja un trazo de 4, luego un hueco de 4, repitiéndose. Trazos y huecos iguales. - Dos valores —
8 2dibuja un trazo de 8 unidades, un hueco de 2 unidades y luego se repite. Esta es la forma más común. - Varios valores —
4 1 2 1alterna entre trazo 4, hueco 1, trazo 2, hueco 1, y luego vuelve a empezar.
El punto clave a tener en cuenta: si se indica un número impar de valores, la lista se duplica para hacerla par. Así, 5 3 2 se comporta como 5 3 2 5 3 2, lo que significa trazo 5, hueco 3, trazo 2, trazo 5, hueco 3, trazo 2 — el papel de cada número se invierte en la segunda pasada. Use un número par de valores siempre que desee un patrón repetitivo predecible.
Un valor de 0 para un trazo produce un punto cuando se combina con stroke-linecap: round, que es la forma de crear líneas punteadas redondeadas.
Casos de uso comunes
- Bordes o separadores discontinuos y punteados en iconos e ilustraciones, donde un
borderCSS no puede seguir un trazado curvo o diagonal. - Animaciones de trazado ("auto-dibujado"), donde
stroke-dasharrayse establece con la longitud del trazado y stroke-dashoffset se anima desde esa longitud hasta0, haciendo que el trazo parezca dibujarse a sí mismo. - Anillos de progreso y cargadores, donde animar el trazo y el offset revela un trazo circular.
Los estilos en línea CSS anulan los atributos de presentación SVG. Por ejemplo, un estilo en línea stroke-dasharray: 4; tiene prioridad sobre el atributo de presentación stroke-dasharray="4".
La propiedad stroke-dasharray puede usarse tanto como propiedad CSS como atributo de presentación SVG. Puede aplicarse a cualquier elemento, pero solo afecta a los siguientes: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos de forma y contenido de texto. |
| Heredable | Sí. |
| Animable | No. |
| Versión | Especificación SVG 1.1 |
| Sintaxis DOM | Object.strokeDasharray = "none"; |
Sintaxis
Sintaxis CSS de stroke-dasharray
stroke-dasharray: none | <dasharray> | initial | inherit;Ejemplo de la propiedad stroke-dasharray:
Ejemplo de código CSS stroke-dasharray
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="6,6" d="M5 20 l215 0" />
<path stroke-dasharray="8,10" d="M5 40 l215 0" />
<path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Resultado
Ejemplo de la propiedad stroke-dasharray con el elemento <line>:
Otro ejemplo de código CSS stroke-dasharray
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dasharray property example</h2>
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
<line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
stroke-dasharray="3" />
<line x1="0" y1="5" x2="30" y2="5" stroke="#000"
stroke-dasharray="5 1" />
<line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
stroke-dasharray="4 2 2" />
<line x1="0" y1="9" x2="30" y2="9" stroke="#666"
stroke-dasharray="4 1 3 2" />
</svg>
</body>
</html>En este ejemplo, cada <line> usa un patrón diferente: una línea continua (sin dasharray), luego 3 (trazos y huecos iguales), 5 1 (trazos largos, huecos pequeños), y los patrones con recuento impar 4 2 2 y 4 1 3 2, que se repiten en dos pasadas según se describe anteriormente.
Valores
| Valor | Descripción |
|---|---|
| none | No se usa ningún trazo discontinuo. |
<dasharray> | Se usa un patrón de trazos discontinuos. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
stroke-dasharray es una de varias propiedades que dan estilo al contorno de un SVG. Frecuentemente se combina con:
- stroke-dashoffset — desplaza el inicio del patrón de trazos; la clave para las animaciones de trazado.
- stroke-linecap — controla la forma de los extremos de los trazos (
butt,round,square); useroundpara convertir trazos de longitud0en puntos. - stroke-width — establece el grosor del trazo.
- stroke — establece el color del trazo.
- fill — establece el color interior de la forma.