La stroke-dashoffsetpropiedad en CSS define la ubicación a lo largo de una ruta SVG donde strokecomenzará el guión de a . Cuanto mayor sea el número, más a lo largo del camino comenzarán los guiones.
.module ( stroke-dashoffset: 100; )Recuerda:
- Esto va a anular un atributo de presentación
- Esto no anulará un estilo en línea, p. Ej.
Valores
La stroke-dashoffsetpropiedad puede aceptar un porcentaje o un valor numérico.
stroke-dashoffset: 100stroke-dashoffset: 25%
Tenga en cuenta que las unidades (es decir, emy px) no son necesarias. Un número sin unidades se representa en unidades de píxeles. El porcentaje es relativo al porcentaje de la ventana gráfica actual.
Vea la propiedad Pen stroke-dashoffset de CSS-Tricks (@ css-tricks) en CodePen.
Ponerse complicado con stroke-dashoffset
¿Alguna vez has visto esas demostraciones geniales en las que una forma SVG parece dibujarse sola? Ese es un truco que anima la stroke-dashoffsetde un elemento junto con la stroke-dasharraypropiedad.
.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.
Relacionado
strokestroke-dasharraystroke-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í |