SVG 交点设置颜色

Posted 2023-03-06

【中文标题】SVG 交点设置颜色

【英文标题】：SVG Intersection set color

【发布时间】：2022-01-19 12:34:05

【问题描述】：

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

我尝试过使用 CSS Blendmodes，如下所示：

line 
  mix-blend-mode: screen;

我有什么办法可以做到这一点吗？使用 CSS 还是使用 javascript？

【参考方案1】：

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

然而，这需要重新组织 SVG：

（CodePen 和你的动画here）

<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 712.828 1100.5">
      <defs>
        <!-- define things that are reused -->
        <g id="Lines" fill="none" stroke->
          <!-- 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   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>

【讨论】：

这太棒了！正是我想要的，非常感谢！我知道应该有一些简单的方法可以做到这一点，我完全忘记了面具。