0
236
VistasIntersección SVG establecer color
Así que tengo una forma SVG que estoy animando usando GSAP, y puedes encontrarla en este codepen aquí . Lo que quiero que suceda es que cuando las líneas se crucen con el círculo rosa, las líneas internas se vuelvan blancas, como en esta imagen: 
Intenté usar CSS Blendmodes, así:
line { mix-blend-mode: screen; }¿Hay alguna manera de que pueda hacer esto? ¿Con CSS o con JavaScript?
1 Respuestas
Responde la pregunta0
No sé React, por lo que esto puede chocar con sus planes futuros, pero podría enmascararlo en SVG. Pones el círculo sobre las líneas, pero quitas la parte que las cubre usando una mask . Luego pones otro círculo, blanco, detrás del círculo rosa pero aún sobre las líneas. Luego, este círculo es visible a través de las partes eliminadas del círculo rosa, por lo que parece como si las líneas se volvieran blancas.
Esto, sin embargo, requiere una reorganización del SVG:
(CodePen con su animación aquí )
<svg xmlns="http://www.w3.org/2000/svg" width="712.828" height="1100.5" viewBox="0 0 712.828 1100.5"> <defs> <!-- define things that are reused --> <g id="Lines" fill="none" stroke-width="4"> <!-- define a group of lines --> <line id="Line_0" data-name="Line 6" x1="710" y2="710" transform="translate(1.414 184)" /> <line id="Line_1" data-name="Line 1" y2="929" transform="translate(215.414 171.5)" /> <line id="Line_2" data-name="Line 2" y2="894" transform="translate(231.414)" /> <line id="Line_3" data-name="Line 47" y2="842" transform="translate(247.414 92)" /> </g> <circle id="Circle" data-name="Ellipse 1" cx="202" cy="202" r="202" transform="translate(185.414 445)"/> </defs> <!-- the rest of your elements should be at this place, but they are not important for this demonstration --> <use href="#Lines" stroke="#2d2334" fill="none"/> <!-- display the lines --> <mask id="Mask"> <rect width="100%" height="100%" fill="white"/> <!-- white everywhere = keep everything... --> <use href="#Lines" stroke="black"/> <!-- ...except for lines' area (black) --> </mask> <use href="#Circle" fill="#ffffff"/> <!-- background circle - color of the intersection --> <use href="#Circle" fill="#d80b8c" mask="url(#Mask)"/> <!-- the circle with lines masked out, so the background circle is visible through lines' area --> </svg>