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>以下は私が求めるものです。
注: マスキングを使用してこれを行うこともできますが、一部のブラウザーでは非常に遅くなります。