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 坐标。