我想将目的地输出合成应用到我的 SVG,以便一个形状可以“擦除”其他现有形状。根据我在SVG element的文档中<feComposition>
阅读的内容,这应该可以工作,但不会产生预期的结果。我正在尝试使用该in="BackgroundImage"
属性将我的过滤器应用于 SVG 文档中在使用过滤器之前出现的所有内容。
<svg viewBox="0 0 100 100">
<filter id="destination-out">
<feComposite in="BackgroundImage" operator="out" />
</filter>
<polyline points="0,25 100,25" stroke="black" />
<polyline points="0,50 100,50" stroke="black" />
<polyline points="0,20 100,60" stroke="black" filter="url(#destination-out)" />
</svg>
这是一个 jsBin,显示了此代码产生的内容。我希望第三个对角线<polyline>
根本不可见;<polyline>
相反,我希望它“擦除”它与前两个s相交的地方。
对我的目的而言,旧版浏览器支持并不重要;这只需要在最新版本的 Chrome 中工作。