所以我有一個 SVG 形狀，我正在使用 GSAP 制作影片，您可以在
我試過使用 CSS Blendmodes，如下所示：
line {
mix-blend-mode: screen;
}
有什么辦法可以做到這一點嗎？使用 CSS 還是使用 JavaScript？
uj5u.com熱心網友回復：
我不知道 React，所以這可能會與您的進一步計劃發生沖突，但您可以在 SVG 中將其屏蔽掉。您將圓圈放在線條上，但使用mask. 然后你在粉紅色圓圈后面放置另一個白色圓圈，但仍在線條上方。然后通過粉紅色圓圈的洗掉部分可以看到這個圓圈，所以看起來線條好像變白了。
但是，這需要重新組織 SVG：
（CodePen與影片這里）
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/402343.html
標籤：