javascript - SVG 交点设置颜色

Question

所以我有一个 SVG 形状，我正在使用 GSAP 制作动画，你可以在这个 codepen here 中找到它.我想要发生的是，当线条与粉红色圆圈相交时，内部线条变成白色，如下图所示:

我试过使用 CSS Blendmodes，像这样:

line {
  mix-blend-mode: screen;
}

有什么方法可以做到这一点吗？使用 CSS 还是使用 JavaScript？

Answer 1

我不了解 React，所以这可能会与您的进一步计划发生冲突，但您可以 mask它在 SVG 中。您将圆放在线条上，但使用 mask 移除覆盖它们的部分。然后你在粉红色圆圈后面放另一个白色圆圈，但仍在线条上方。然后通过粉色圆圈的移除部分可以看到这个圆圈，所以看起来线条好像变成了白色。

然而，这需要重组 SVG:

(带有动画的 CodePen here )

<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>