svg - 如何使用元素作为过滤器源？

Question

我想使用我在 <defs> 中定义的元素作为另一个元素过滤器的源输入。

我的目标是用两种形式进行复合:一种是我应用过滤器，另一种是应用过滤器。

我期待这能奏效，但它没有:

<defs>
  <rect id="shape1" (...) />

  <filter id="f1">
    <feComposite in="SourceGraphic" in2="#shape1" operator="xor" />
  </filter>
</defs>
<circle id="shape2" filter="url(#f1)" (...) />

如何更换 in2="#shape1"为了使它工作？

Answer 1

您不能像这样直接在过滤器的“in”属性中引用形状。你必须先用

<feImage .... result="myShape1"> 

然后将其引用为 in2="myShape1"。 IE10 与 webkit 的行为不同，它们以这种方式处理被拉入过滤器的文档内元素。 Webkit/blink 符合规范，因为它们将 feImage 中声明的任何 x,y 视为对原始元素的 x,y 坐标的附加变换。 IE10 似乎用新坐标替换了原始元素的 x,y 坐标。