svg - 在 SVG 中应用目的地输出合成

Question

我想将目的地输出合成应用于我的 SVG，以便一个形状可以“删除”其他现有形状。根据我在 documentation for the <feComposition> SVG element 上读到的内容，这应该可行，但不会产生预期的结果。我正在尝试使用 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>