Rellenos (fill)

Hasta ahora, hemos visto como definir ciertas formas en un documento SVG y como definir trazos. Sin embargo, también existe una familia de atributos fill para indicar el estilo de relleno que tendrá nuestra figura o elemento.

El atributo fill

Mediante el atributo fill podemos indicar el color de relleno que utilizaremos en la figura o forma en cuestión. Por ejemplo, observa este ejemplo donde definimos un triángulo utilizando un trayecto <path>.

Mediante los atributos stroke y stroke-width definimos un color de trazo y su grosor, mientras que con fill definimos el color de relleno:

<svg viewBox="0 0 100 100" height="400">
  <path d="M5 5 L5 90 L90 90 Z" stroke="black" stroke-width="2" fill="indigo" />
</svg>

¡Recuerda que en lugar de colores puedes utilizar variables CSS para los diferentes elementos!

El atributo fill-opacity

El atributo fill-opacity nos permite establecer un grado de opacidad al color de relleno de un elemento. El grado de opacidad se mide en valores numéricos entre 0 y 1, con decimales. Por ejemplo, el valor 0.5 sería equivalente a un 50% de opacidad. En navegadores modernos se permite incluso indicar valores con porcentajes.

<svg viewBox="0 0 100 100" height="400">
  <path d="M5 5 L5 90 L90 90 Z" stroke="black" stroke-width="2"
        fill="indigo" fill-opacity="0.9" />
</svg>

body {
  background: url("manzdev.png") repeat;
  background-size: 135px;
}

Observa que en este caso, hemos establecido con CSS una imagen de fondo al documento HTML, para que así se note la transparencia establecida en el SVG con el atributo fill-opacity. Ten en cuenta que dicha opacidad solo se aplica al relleno, y no al color de trazo.

El atributo fill-rule

El atributo fill-ruleestablece el algoritmo mediante el cuál se determina que es relleno y que no lo es cuando tenemos trazos que se superponen. Por defecto, este atributo tiene el valor nonzero establecido. Sin embargo se pueden utilizar estos dos valores:

Esta característica es complicada de entender, pero observa la siguiente demo donde comprenderás bien como funciona:

<svg viewBox="0 0 100 100" height="400">
  <path d="M5 5 L5 90 L90 90
           M25 75 L75 75 L75 25 L25 25 Z"
        fill="indigo" stroke="black" fill-rule="nonzero" />
</svg>

<p>Valor de <code>fill-rule</code>:</p>
<select id="fill-rule">
  <option value="0">nonzero</option>
  <option value="1">evenodd</option>
</select>

const select = document.querySelector("select");
const path = document.querySelector("path");
select.addEventListener("change", () => {
  const selectedOption = select[select.selectedIndex].textContent;
  path.setAttribute("fill-rule", selectedOption);
});

select {
  padding: 10px;
  font-size: 1.5rem;
}