Patrones en trazos

Existen una serie de atributos SVG llamdos stroke-dasharray y stroke-dashoffset, que nos permiten definir patrones en el trazado de figuras y formas, de modo que luego, incluso, podemos llegar a animarlas.

Estas propiedades son muy potentes y vamos a ver algunos ejemplos de como trabajar con ellas. Las propiedades son las siguientes:

Veamos cada una por separado.

El atributo stroke-dasharray

Este atributo nos permite crear un patrón de trazo a partir de una imagen o forma. Por ejemplo, observa este ejemplo, donde aún no hemos aplicado el atributo stroke-dasharray. Observa la forma del trazo:

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 3 L25 3 L25 22 L15 18 L5 22" />
  <text x="3" y="27" font-size="3">sin stroke-dasharray</text>
</svg>

svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

Como puedes ver, el trazo es continuo, del mismo color, y al no tener stroke-dasharray definido, aún no se puede ver ningún patron en el trazo.

Vamos a aplicarle un stroke-dasharray para ver como quedaría:

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 3 L25 3 L25 22 L15 18 L5 22" stroke-dasharray="3 1" />
  <text x="13" y="27" font-size="3">3 1</text>
</svg>

svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

Observa que ahora tenemos una línea de trazo discontinua. Esto ocurre porque hemos establecido el valor 3 1 al atributo stroke-dasharray, por lo que el navegador va a establecerle un trazo donde hay un primer fragmento de 3 unidades de tamaño trazado, seguido de un fragmento de 1 unidad de tamaño sin trazar, y este patrón se repetirá de forma infinita.

Obsera el siguiente ejemplo, donde utilizamos los patrones 3 3 (mismo tamaño para fragmento con trazo y sin trazo), 6 3 2 1 y 9 2. Observa como quedaría cada uno de ellos:

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 3 L25 3 L25 22 L15 18 L5 22" stroke-dasharray="3 3" />
  <text x="13" y="27" font-size="3">3 3</text>
</svg>

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 3 L25 3 L25 22 L15 18 L5 22" stroke-dasharray="6 3 2 1" />
  <text x="10" y="27" font-size="3">6 3 2 1</text>
</svg>

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 3 L25 3 L25 22 L15 18 L5 22" stroke-dasharray="9 2" />
  <text x="13" y="27" font-size="3">8 2</text>
</svg>

Piensa que podemos utilizar fragmentos con tamaños muy variables para luego desplazarlos y modificarlos, como veremos en el siguiente apartado.

El atributo stroke-dashoffset

El atributo stroke-dashoffset se puede utilizar conjuntamente al atributo anterior, y es muy útil, sobre todo, para animar los trazos de una figura o forma. Básicamente, el atributo stroke-dashoffset establece un desplazamiento al principio del trazo, haciendo que el inicio del trazo discontinuo comience el número de píxeles más tarde que se indique.

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 5 L25 5 L25 25 L15 20 L5 25" stroke-dasharray="3 3" stroke-dashoffset="3">
</svg>

<fieldset>
  <legend>Propiedad stroke-dashoffset:</legend>
  <input type="range" min="-20" max="20" step="1" value="3">
  <output>1</output>
</fieldset>

const paths = document.querySelectorAll("path");
const input = document.querySelector("input");
input.addEventListener("input", () => {
  input.nextElementSibling.value = input.value;
  paths.forEach(path => path.setAttribute("stroke-dashoffset", input.value));
});

svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

Esto puede ser especialmente interesante si tienes un primero y/o segundo fragmento lo suficientemente grande, como para que el desplazamiento de la impresión de que se está dibujando el trazo, en lugar de moviéndose. Observa este ejemplo donde se muestra este comportamiento, moviendo desde -64 hasta 0.

<svg viewBox="0 0 30 30" height="250">
  <path d="M5 5 L25 5 L25 25 L15 20 L5 25" stroke-dasharray="100 9000" stroke-dashoffset="0">
</svg>

<fieldset>
  <legend>Propiedad stroke-dashoffset:</legend>
  <input type="range" min="-64" max="0" step="1" value="-64">
  <output>-64</output>
</fieldset>

const paths = document.querySelectorAll("path");
const input = document.querySelector("input");
input.addEventListener("input", () => {
  input.nextElementSibling.value = input.value;
  paths.forEach(path => path.setAttribute("stroke-dashoffset", input.value));
});

svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}