Propiedad CSS stroke-dashoffset

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-dashoffset puede 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

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

html

<!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>

Try it Yourself »

Resultado

Lista de valores de stroke-dashoffset en CSS

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?

Se utiliza para cambiar la ubicación de los trazos en una línea discontinua.Especifica las dimensiones de la imagen del borde.Cambia el estilo del contorno de un elemento.Utiliza valores <length> para definir el desplazamiento del trazo discontinuo.Solo acepta valores en porcentaje para definir el desplazamiento del trazo discontinuo.

Propiedad CSS stroke-dashoffset ​

Sintaxis ​

Ejemplo de la propiedad stroke-dashoffset: ​

Resultado ​