0
205
ViewsCSS Invertir colores en elemento svg transparente
en mi html tengo un círculo svg transparente. Necesito invertir colores en este círculo svg, así que veré un círculo negro con texto cian.
Traté de configurar el relleno de .cursor__inner en transparente con filter invert(1) (como puede verlo en el fragmento de código), pero no funcionó.
.cursor { position: absolute; top: 0; left: 0; } .cursor__inner { fill: transparent; filter: invert(1); } p { color: red; } <svg class="cursor" width="64" height="64" viewBox="0 0 64 64"> <circle class="cursor__inner" cx="32" cy="32" r="32" /> </svg> <p>Hello World!</p>Quiero hacer este efecto:
Prefiero la solución con css puro.
3 answers
Answer question0
Una forma de lograr el resultado requerido está cerca del código dado en la pregunta.
El color del texto en el elemento p se invierte para que la parte que se encuentra sobre el círculo tenga el color cian. El fondo del elemento que contiene la p y svg (en el caso de este fragmento, el cuerpo) tiene un fondo blanco, por lo que el modo de mezcla en el texto toma la diferencia del color (que ahora es #00ffff = cian) y blanco (#ffffff) para volver al rojo (#ff0000).
Como se señaló en los comentarios, no es posible invertir el color del círculo SVG ya que tiene transparencia, por lo que siempre tendrá el RGB que haya invertido para que se rellene con un color sólido.
body { background: white; height: 100vh; } .cursor { position: absolute; top: 0; left: 0; } .cursor__inner { fill: black; } p { color: cyan; color: red; filter: invert(1); mix-blend-mode: difference; } <body> <svg class="cursor" width="64" height="64" viewBox="0 0 64 64"> <circle class="cursor__inner" cx="32" cy="32" r="32" /> </svg> <p>Hello World!</p> </body>0
Trate de seguir esto.
.cursor { position: absolute; top: 0; left: 0; z-index: -1; } .cursor__inner { fill: white; filter: invert(100%); } p { color: red; filter: invert(100%); } <svg class="cursor" width="64" height="64" viewBox="0 0 64 64"> <circle class="cursor__inner" cx="32" cy="32" r="32" /> </svg> <p>Hello World!</p>0
¿Como esto? transparente invertido es transparente, así que configuré el relleno en blanco. y filtrar: invertir utiliza %.
filtro: invertir (1) <- Incorrecto
filtro: invertir (100%) <- Derecha
.cursor { position: absolute; top: 0; left: 0; z-index: -1; } .cursor__inner { fill: white; z-index: -1; } p { color: red; z-index: 100; } .invert { filter: invert(100%); } <svg class="cursor invert" width="64" height="64" viewBox="0 0 64 64"> <circle class="cursor__inner" cx="32" cy="32" r="32" /> </svg> <p class="invert">Hello World!</p>