SVG中mask和filter的处理顺序 [英] Processing order of mask and filter in SVG

问题描述

下面的 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?

推荐答案

SVG 1.1 规范是 此处:

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.

对于 SVG 2，这已移至 CSS 过滤效果 和 Masking 模块，两者均声明顺序为

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.

这篇关于SVG中mask和filter的处理顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！