CODEWITHSUNDEEP
svgsvg-filters
Waruyama
Waruyama

Reputation: 3523

Processing order of mask and filter in SVG

The SVG below contains a rectangle with a blur filter and a circular mask applied. The result is a red circle, so obviously the filter is applied before the mask. This seems to be the same on all browsers.

<svg width="300" height="300">
  <defs>
    <filter id="f1">
      <feGaussianBlur stdDeviation="10" />
    </filter>
    <mask id="m1">
      <circle cx="150" cy="150" r="50" fill="#fff"/>
    </mask>
  </defs>
  <rect x="50" y="50" width="200" height="200" fill="red" mask="url(#m1)" filter="url(#f1)"/>
</svg>

My question is: Why is the filter processed before the mask? Is this specified somewhere in the specification? Or is it just a coincidence that all browsers apply the same processing order? Can I rely on this order or is it better to introduce a parent element, so each element has only one operation?

Upvotes: 0

Views: 259

Answers (1)

ccprog
ccprog

Reputation: 21821

The SVG 1.1 spec is here:

The element is first painted onto the temporary canvas.. Then any filter effects specified for the graphics element are applied to create a modified temporary canvas. The modified temporary canvas is then composited into the background, taking into account any clipping, masking and object opacity settings on the graphics element.

For SVG 2, this has been moved to the CSS Filter effects and Masking modules, with both stating order as

first any filter effect is applied, then any clipping, masking and opacity.

Upvotes: 4

Related Questions