[filter-effects-1] [css-masking-1] clip then filter, or filter then clip?

[faceless2]

When clip and filter are set on the same element, do we filter then clip the filtered result, or clip the input then filter it? As best as I can tell this isn't currently defined.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
 <defs>
  <filter id="shift">
   <feOffset dx="50"/>
  </filter>
  <clipPath id="clip">
   <rect x="100" y="50" width="100" height="100"/>
  </clipPath>
 </defs>
 <rect x="100" y="50" width="100" height="100" fill="red"/>
 <rect x="50" y="50" width="200" height="100" fill="green" filter="url(#shift)" clip-path="url(#clip)"/>
</svg>

(see https://output.jsbin.com/veniyap)

Gecko clips then filters, so we see half a red rectangle. Webkit filters then clips, so we see a completely green rectangle.

I don't think there's a huge amount in it, but clip-then-filter is slightly more useful: you could clip an object to an arbitrary shape, then blur it - the blur will blur the clipped outline. If you filter first, you don't get a blurred edge.

[BigBadaboom]

FIlters should be applied first.

I think the behaviour is specified in the SVG 1.1 spec. But it is hidden away in some paragraph somewhere and I can't find it right now. :)

However, it is made explicit in Filter Effects Module Level 1.

The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity [CSS3COLOR].

[mstange]

It looks like Gecko clips before and after filtering, otherwise the green part would still be square. That's definitely a bug. I've filed bug 1673073 on it.

[faceless2]

The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity [CSS3COLOR].

Thanks! That's what I was looking for.