如何使用元素作爲過濾器源？

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座標與新座標。