我想使用 mix-blend-mode 属性让一些特定的 SVG 路径在笔划上采用背景图像，这样路径就好像是删除路径一样。以下代码是我所达到的。但是，如您所见，mix-blend 属性会影响需要在笔划上没有任何背景图像的情况下出现的其他路径。因此，我正在寻求一种方法，将 mix-blend-mode 属性仅应用于单独的元素组，并保持其他元素不受影响。
g.erasing image{
mix-blend-mode: lighten;
}<html>
<body>
<svg height="400" width="450">
<!-- this is the background image -->
<image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<g class="drawing">
<!-- these are the drawing paths -->
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
</g>
<g class="erasing">
<!-- these are the erasing paths -->
<path d="M 0 0 L 400 450" stroke="black" stroke-width="20" />
<path d="M 0 0 L 200 300" stroke="black" stroke-width="20" />
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
</g>
</svg>
</body>
</html>下面是我要找的。
注意:我可以使用掩码来做到这一点，但在某些浏览器中速度很慢。
最佳答案
您可以将g元素与isolation: isolate;一起使用来指定元素在mix-blend-mode的作用下。
circle{
mix-blend-mode: lighten;
}
g{
isolation: isolate;
}<svg width="200px" height="200px">
<rect width="100%" height="100%" fill="pink"/>
<circle cx="100" cy="80" r="60" fill="red"/>
<circle cx="70" cy="130" r="60" fill="green"/>
<circle cx="130" cy="130" r="60" fill="blue"/>
</svg>
<svg width="200px" height="200px">
<rect width="100%" height="100%" fill="pink"/>
<g>
<circle cx="100" cy="80" r="60" fill="red"/>
<circle cx="70" cy="130" r="60" fill="#0f0"/>
<circle cx="130" cy="130" r="60" fill="blue"/>
</g>
</svg>但在这种情况下，我认为您应该使用 mask 元素。
g.drawing{
mask: url(#erasing);
}<svg height="400" width="450">
<!-- this is the background image -->
<image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<g class="drawing">
<!-- these are the drawing paths -->
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
</g>
<defs>
<mask id="erasing">
<rect width="100%" height="100%" fill="white"/>
<!-- these are the erasing paths -->
<path d="M 0 0 L 400 450" stroke="black" stroke-width="20" />
<path d="M 0 0 L 200 300" stroke="black" stroke-width="20" />
</mask>
</defs>
</svg>关于html - CSS:仅将 mix-blend-mode 属性应用于特定元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47203122/