Question

下面的SVG包含一个带有模糊滤镜和圆形蒙版的矩形。结果是一个红色圆圈，所以显然过滤器是在蒙版之前应用的。这似乎在所有浏览器上都是一样的。

＆＃13;

<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>

＆＃13;

我的问题是：为什么在面具之前处理过滤器？这是在specification的某处指定的吗？或者只是巧合所有浏览器都应用相同的处理顺序？我可以依赖这个顺序，还是引入父元素更好，所以每个元素只有一个操作？

Answer 1

规范是here：

首先将元素绘制到临时画布上。然后应用为图形元素指定的任何滤镜效果来创建修改后的临时画布。然后将修改后的临时画布合成到背景中，同时考虑图形元素上的任何剪裁，蒙版和对象不透明度设置。

SVG中掩码和滤波器的处理顺序

1 个答案: