在 SVG 中应用目标输出合成

Question

我想将目标输出合成应用于我的 SVG，以便一个形状可以“擦除”其他现有形状。根据我在 documentation for the <feComposition> SVG element, this should work, but it doesn't produce the desired result. I am attempting to use the in="BackgroundImage" attribute 上阅读的内容，将我的过滤器应用于使用过滤器之前发生的 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>

Here's a jsBin 显示此代码生成的内容。我希望第三个对角线 <polyline> 完全不可见；相反，我希望它“擦除”它与前两个 <polyline>s.

相交的地方

旧版浏览器支持对我来说并不重要；这只需要在 Chrome.

的最新版本中工作

Answer 1

BackgroundImage 不是任何当前主流浏览器支持的输入类型，并且已被未来的浏览器弃用。

要完成您想做的事情，您将必须输入要在过滤器中使用的形状作为 SourceGraphic 输入，并通过 feImage 输入要用作第二个输入的形状。 feImage 在除 Firefox 之外的任何地方都支持直接片段引用，因此要获得完整的跨浏览器支持，您需要将该形状作为单独的 SVG 数据 URI 内联到您的 feImage 中。

这是一个适用于非 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>

在 SVG 中应用目标输出合成

Applying destination-out compositing in SVG

svg

svg-filters

compositing