Propiedad CSS stroke-dasharray

La propiedad stroke-dasharray controla el patrón de trazos y huecos utilizados para formar la forma del trazo de un camino.

La propiedad stroke-dasharray tiene dos valores: none y <dasharray>.

Un <dasharray> es una lista de longitudes o porcentajes separados por comas y/o espacios. Cada valor especifica una longitud a lo largo del camino para la cual el trazo es un trazo o un hueco.

Los estilos en línea de CSS anulan los atributos de presentación de SVG. Por ejemplo, un estilo en línea stroke-dasharray: 4; tendrá prioridad sobre un atributo de presentación stroke-dasharray="4".

INFO

La propiedad stroke-dasharray puede utilizarse tanto como propiedad CSS como atributo de presentación de SVG. Puede aplicarse a cualquier elemento, pero solo afecta a los siguientes elementos: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> y <tspan>.

Valor inicial	none
Se aplica a	Formas y elementos de contenido de texto.
Heredado	Sí.
Animable	No.
Versión	Especificación SVG 1.1
Sintaxis DOM	Object.strokeDasharray = "none";

Sintaxis

Sintaxis de CSS stroke-dasharray

css

stroke-dasharray: none | <dasharray> | initial | inherit;

Ejemplo de la propiedad stroke-dasharray:

Ejemplo de código CSS stroke-dasharray

html

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

Try it Yourself »

Resultado

CSS stroke-dasharray

Ejemplo de la propiedad stroke-dasharray con el elemento `<line>`:

Otro ejemplo de código CSS stroke-dasharray

html

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

Try it Yourself »

Valores

Valor	Descripción
none	No se utiliza ningún trazo.
`<dasharray>`	Se utiliza un patrón de trazos.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es la función de la propiedad 'stroke-dasharray' en CSS?

Establece el patrón de trazos y huecos utilizados para trazar caminos.Colorea los caminos del trazo.Especifica el ancho del camino del trazo.Modifica el patrón de secuencia de trazos repitiendo los valores.Crea efectos de animación para los caminos del trazo.

Propiedad CSS stroke-dasharray ​

Sintaxis ​

Ejemplo de la propiedad stroke-dasharray: ​

Resultado ​

Ejemplo de la propiedad stroke-dasharray con el elemento <line>: ​

Valores ​