Trazos (stroke)

Hasta ahora hemos visto varias etiquetas SVG, sin embargo, en muchos de ellos podemos utilizar ciertos atributos que permiten personalizar aspectos visuales del elemento en cuestión. Se pueden utilizar tanto desde el código HTML como desde CSS.

Los atributos posibles para utilizar son los siguientes:

Vamos a ver algunos ejemplos de cada uno de ellos.

El atributo stroke

El atributo stroke sirve para definir un color para un trazo. Observa el siguiente ejemplo. En él, tenemos cuatro rectángulos con colores diferentes: el primero es de color púrpura, el segundo rojo, el tercero rosa y el cuarto amarillo dorado:

<svg viewBox="0 0 45 45" height="300" style="background:#aaa">
  <rect x="5" y="5" width="15" height="15" stroke="purple" />
  <rect x="25" y="5" width="15" height="15" stroke="red" />
  <rect x="5" y="25" width="15" height="15" stroke="deeppink" />
  <rect x="25" y="25" width="15" height="15" stroke="gold" />
</svg>

rect {
  fill: none;
}

Si lo deseamos, también podemos utilizar CSS, en lugar de escribir el atributo en el HTML/SVG directamente. Esto puede ser útil si queremos aplicar estilos a un grupo de elementos (y ahorrar código por no tener que hacerlo uno por uno). También puede ser útil para definir animaciones CSS.

Un ejemplo sería el siguiente, donde cambiamos el color de trazo de todos los elementos <rect>:

rect {
  stroke: indigo;
}

El atributo stroke-width

El atributo stroke-width nos permite modificar el grosor del trazo de nuestro elemento. En el siguiente ejemplo estamos utilizando un grosor de 0 (inexistente, equivalente a no indicar el atributo), un grosor de 1px, un grosor de 2px y un grosor de 6px.

Ten en cuenta que en el atributo no se indica la unidad. Sin embargo, si lo hacemos en el CSS si haría falta. Observa que en el ejemplo también tenemos un deslizante para cambiar el grosor de todos los cuadrados:

<svg viewBox="0 0 45 45" height="300" style="background:#aaa">
  <rect x="5" y="5" width="15" height="15" stroke="purple" stroke-width="0" />
  <rect x="25" y="5" width="15" height="15" stroke="red" stroke-width="1" />
  <rect x="5" y="25" width="15" height="15" stroke="deeppink" stroke-width="2" />
  <rect x="25" y="25" width="15" height="15" stroke="gold" stroke-width="6" />
</svg>

<fieldset>
  <legend>Ancho de los cuadrados:</legend>
  <input type="range" min="1" max="10" step="1" value="1">
  <output>1</output>
</fieldset>

const rects = document.querySelectorAll("rect");
const input = document.querySelector("input");
input.addEventListener("input", () => {
  input.nextElementSibling.value = input.value;
  rects.forEach(rect => rect.setAttribute("stroke-width", input.value));
});

rect {
  fill: none;
}

Observa que los cuadrados, en cuanto superan el grosor de 5px se solapan, y la forma de actuar de SVG es que los últimos rectángulos se posicionan encima de los anteriores, es decir, conservan su espacio y los últimos elementos son los que están encima.

El atributo stroke-opacity

Podemos utilizar el atributo stroke-opacity para establecer una opacidad, es decir, un grado de transparencia. El valor a indicar es un número entre 0 y 1, con decimales, donde 0 es totalmente transparente y 1 es totalmente opaco.

<svg viewBox="0 0 45 45" height="300" style="background:#aaa">
  <rect x="5" y="5" width="15" height="15" stroke="red" stroke-opacity="0" />
  <rect x="25" y="5" width="15" height="15" stroke="red" stroke-opacity="0.25" />
  <rect x="5" y="25" width="15" height="15" stroke="red" stroke-opacity="0.5" />
  <rect x="25" y="25" width="15" height="15" stroke="red" stroke-opacity="1" />
</svg>
<fieldset>
  <legend>Opacidad de los trazos:</legend>
  <input type="range" min="0" max="1" step="0.1" value="1">
  <output>1</output>
</fieldset>

const rects = document.querySelectorAll("rect");
const input = document.querySelector("input");
input.addEventListener("input", () => {
  input.nextElementSibling.value = input.value;
  rects.forEach(rect => rect.setAttribute("stroke-opacity", input.value));
});

rect {
  fill: none;
}

El control inferior, permite modificar el valor de opacidad de los cuadrados de 0.1 en 0.1.