How can I use an element as filter source?

Question

I would like to use an element I defined in the <defs> as source input for another element's filter.

My goal is to do a Composite with two forms: the one I apply the filter on and another one.

I was expecting this to work, but it doesn't:

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

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

How can I replace in2="#shape1" in order to make it work?

Answer 1

You can't directly reference a shape in a filter's "in" property like this. You have to first pull it in with an

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

and then reference it as in2="myShape1". IE10 has different behavior than webkit in how they treat in-document elements pulled into a filter in this way. Webkit/blink are spec compliant in that they treat any x,y declared in feImage to be an additional transform to the x,y coordinates of the original element. IE10 seems to replace the x,y coordinates of the original element with the new coordinates.