1

我想将目的地输出合成应用到我的 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 中工作。

4

1 回答 1

3

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>

于 2020-07-14T21:39:54.553 回答