La stroke-dasharraypropiedad en CSS es para crear guiones en el trazo de formas SVG. Cuanto mayor sea el número, más espacio entre los guiones del trazo.
.module ( stroke-dasharray: 5; )Recuerda:
- Esto va a anular un atributo de presentación
- Esto no anulará un estilo en línea, p. Ej.
Valores
La stroke-dasharraypropiedad puede aceptar cualquier longitud, incluidos los valores sin unidades:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Los valores sin unidades son probablemente la opción más común, como ocurre generalmente con los valores SVG. Se convierten en unidades de longitud que son relativas al sistema de coordenadas configurado por viewBox.
Vea la propiedad Pen stroke-dasharray de CSS-Tricks (@ css-tricks) en CodePen.
Ponerse complicado con stroke-dasharray
¿Alguna vez has visto esas demostraciones geniales en las que una forma SVG parece dibujarse sola? Ese es un truco que toma el aspecto stroke-dasharrayde un elemento y lo anima junto con la stroke-dashoffsetpropiedad.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Vea el ejemplo básico de lápiz de dibujo lineal SVG, hacia atrás y hacia adelante por Chris Coyier (@chriscoyier) en CodePen.
Cubrimos esta técnica con mucho más detalle en esta publicación. Parece que a IE 11 y versiones posteriores no le gusta animar las propiedades del trazo con @keyframes, así que tenga cuidado.
Relacionado
strokestroke-dashoffsetstroke-linecapstroke-width
Más información
- Especificaciones de SVG 1.1
- MDN en rellenos y trazos
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | sí | sí | 9+ | 4.4+ | sí |