Propiedad CSS stroke-dashoffset
How to use the stroke-dashoffset CSS property to specify where the dash of the stroke should begin. Read about the property and see the values with examples.
La propiedad stroke-dashoffset es un atributo de presentación que define la posición a lo largo de una ruta SVG en la que comenzará el trazo.
Las reglas CSS anulan los atributos de presentación. Los estilos en línea tienen prioridad sobre ambos.
info
La propiedad
stroke-dashoffsetpuede utilizarse tanto como propiedad CSS como atributo de presentación. Se puede aplicar a cualquier elemento, pero solo tendrá efecto en los siguientes elementos: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.
info
No es necesario utilizar las unidades "px" o "em".
| Valor inicial | 0 |
|---|---|
| Se aplica a | Formas y elementos de contenido de texto. |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | Especificación SVG 1.1 |
| Sintaxis DOM | Object.strokeDashoffset = 5; |
Sintaxis
Sintaxis de stroke-dashoffset en CSS
stroke-dashoffset: length | percentage | initial | inherit;Ejemplo de la propiedad stroke-dashoffset:
El valor stroke-dashoffset desplaza el punto de inicio del patrón de trazos a lo largo de la ruta.
Ejemplo de código CSS para stroke-dashoffset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-dashoffset property example</h2>
<svg viewBox="-3 0 33 10" >
<line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
<line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
stroke-dasharray="4 1" />
<line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
stroke-dasharray="3 1"
stroke-dashoffset="3" />
<line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
stroke-dasharray="3 1"
stroke-dashoffset="-3" />
<line x1="0" y1="9" x2="30" y2="9" stroke="#666"
stroke-dasharray="3 1"
stroke-dashoffset="1" />
<path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
</svg>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
| length | Establece la longitud de la propiedad. No es necesario utilizar las unidades "px" o "em". |
| percentage | La propiedad se especifica en porcentaje. |
| initial | Hace que la propiedad utilice su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad CSS stroke-dashoffset y cómo se utiliza?