Color de relleno SVG en cascada | Programar Plus

0

Una vez alguien me dijo que su mayor problema con los íconos SVG es que no coincidían con el color del texto con el que estaban. De hecho, fue un problema tan grande para ellos, que a pesar de ver las ventajas de los íconos SVG, se quedaron con las fuentes de íconos. No pensé en eso en ese momento, pero hay una solución bastante fácil para esto.

La idea es usar el valor currentColor en CSS para pasar ese color de texto a las formas SVG. Por ejemplo:

<h1>
  <svg viewBox="0 0 32 32">
    <use xlink:href="https://css-tricks.com/cascading-svg-fill-color/#icon-phone"></use>
  </svg>
  Call Me
</h1>
h1 {
  color: blue;
}
h1 svg {
  fill: currentColor;
}

Puede simplificar esto y dejar que la cascada de relleno llegue al SVG:

h1 {
  color: blue;
  fill: currentColor;
}

Entonces llena cascadas ¿eh? Con buena pinta. ¿Por qué no hacemos esto? Si es así de fácil:

body {
  fill: currentColor;
}

fill solo afecta a SVG de todos modos, por lo que no hará nada que no queramos que haga, y de todos modos es fácilmente reemplazable por un selector más específico.

El problema es que no funciona como está.

Tome este ejemplo, que es solo nuestro ejemplo original dentro del <body>:

<body>
<h1>
  <svg viewBox="0 0 32 32">
    <use xlink:href="https://css-tricks.com/cascading-svg-fill-color/#icon-phone"></use>
  </svg>
  You'd think the SVG would fill blue too?
</h1>
</body>

Entonces:

body {
  fill: currentColor;
  color: red;
}
h1 {
  color: blue;
}
svg {
  border: 5px solid currentColor;
}

¿Cuál es el color actual en el <svg>? blue, ¿derecho? Porque color cascades (se hereda). Podemos ver que eso es cierto, porque el borde de ese svg será azul. Pero el icono en sí (que en realidad es un dibujo <path>) estarán red.

Extraño, creo.

Actualizar: Funciona (¿correctamente?) En Chrome ahora. Firefox y Safari todavía muestran el extraño relleno rojo.

Sin embargo, no es un gran problema, porque puedes simplemente:

svg {
  fill: currentColor;
}

Y eso asegurará que se enganche el color de lo que normalmente esperarías. También puede aplicar el relleno al uso, ruta, símbolo, círculo, rect, etc., pero presionar el svg lo cubre todo (lo cual es bueno para casos de uso simples de un color).

Vea el Pen lcDBd de Chris Coyier (@chriscoyier) en CodePen.

(Visited 2 times, 1 visits today)