我想将目标输出合成应用于我的SVG，以便一个形状可以“擦除”其他现有形状。根据我在<feComposition>SVG元素的文档上阅读的内容，这应该可以工作，但是不会产生预期的结果。我试图使用该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中运行即可。
当前任何主流浏览器均不支持BackgroundImage输入类型，并且以后的浏览器不建议使用BackgroundImage。
要完成您想做的事情，您将必须通过feImage输入要在过滤器中使用的形状作为SourceGraphic输入，以及要用作第二输入的形状。feImage在除Firefox之外的任何地方都支持直接片段引用，因此要获得全面的跨浏览器支持，您将需要在feImage中内嵌该形状作为单独的SVG数据URI。
这是适用于非Firefox的版本。
<svg width="100px" height="100px" viewBox="0 0 100 100">
<defs>
<polyline id="second-shape" points="0,20 100,60" stroke="black" stroke-width="3"/>
<filter id="destination-out">
<feImage x="0" y="0" width="100" height="100" xlink:href="#second-shape"/>
<feComposite in="SourceGraphic" operator="out" />
</filter>
</defs>
<g filter="url(#destination-out)" >
<polyline points="0,25 100,25" stroke="red" />
<polyline points="0,50 100,50" stroke="blue" />
</g>
</svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句