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

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