¿Alguien conoce una solución CSS pura para hacer que cada parte de un svg fijo cambie de color según el color de fondo (claro u oscuro), al igual que en este sitio web y su logotipo? Traté de mirar el código, pero no veo nada que pueda explicar este comportamiento. Tal vez estén usando una solución js, pero no puedo imaginar cómo lo hacen.
He comprobado:
¿Alguien sabe cómo hacer esto?
Simplemente hablando, no puede asignar una propiedad de color a un elemento basado en su color de fondo o el de su padre en CSS.
Sin embargo, puede usarmix-blend-mode para aplicar algún efecto de color que tenga en cuenta el frente y el fondo.
Esto es lo que hacen en el ejemplo de su sitio.
Si inspecciona las propiedades del MENÚ, notará que el color es el mismo que el fondo. Pero debido a mix-blend-mode: difference , se calculará negro con el mismo color en el fondo, o blanco, si el fondo es negro.
Lo realmente bueno de esto es que el color se puede calcular de manera diferente en medio de un personaje. Esto incluso funciona encima del video.