Dentro de la programación web, existen diversas situaciones donde deseamos que nuestros elementos SVG se ajusten dinámicamente al color de fondo. Este ajuste dinámico del color SVG según el fondo puede lograrse con éxito utilizando Javascript.
Imagina un escenario donde el color de fondo de una sección o de una página completa puede cambiar. ¿Cómo asegurarnos de que nuestros gráficos SVG conserven su visibilidad y legibilidad sin importar el color de fondo? La respuesta es manipulando el color SVG con Javascript en función del color de fondo.
Vamos a navegar juntos y a detallar paso a paso cómo cambiar el color de un SVG con Javascript dependiendo del color de fondo.
Conociendo un poco más sobre SVG y colores de fondo
SVG o Scalable Vector Graphics es una tecnología que permite crear gráficos vectoriales en 2D. Los SVG son resistentes a la pérdida de calidad, lo que significa que no importa cuánto los reduzcas o amplíes, siempre mantendrán su calidad.
Por otro lado, el color de fondo es un aspecto importante de cualquier sitio web o aplicación. Afecta la apariencia general y la experiencia del usuario. En ocasiones, los desarrolladores tienen el desafío de hacer corresponder un SVG con varios fondos posibles. Esta es la verdadera magia y poder de cambiar el color SVG con Javascript según el color de fondo.
El proceso de modificar el color SVG en Javascript
Primero, necesitamos un SVG en nuestro HTML. Aquí tienes un SVG de ejemplo, la clásica estrella.
Ahora, imagina que tienes un div con un color de fondo que puede cambiar. Vamos a simular esto con Javascript al cambiar el color de fondo de la página.
document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
Para cambiar el color del SVG, debemos seleccionar el SVG y luego cambiar su color basado en el color del fondo.
document.getElementById('mySVG').style.fill;
Pero, ¿cómo determinamos el color correcto para nuestro SVG? Podemos usar la función getComputedStyle para obtener el color de fondo:
var color = getComputedStyle(document.body).backgroundColor;
Determinar si el color de fondo es claro u oscuro nos ayudará a decidir si nuestro SVG debe ser claro u oscuro. Aquí está la función que lo determina:
function getBrightness(color) {
var rgb = color.match(/d+/g);
return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2];
}
Finalmente, basándonos en el color de fondo, cambiamos el color del SVG:
if (getBrightness(color) > 128) {
document.getElementById('mySVG').style.fill = 'black';
} else {
document.getElementById('mySVG').style.fill = 'white';
}
Y con eso, has aprendido a modificar con éxito el color de un SVG con Javascript en función del color del fondo. Este concepto es altamente útil en el mundo de la programación web, ¡así que utilízalo sabiamente!