SVG中Mask与Filter的处理顺序验证及浏览器一致性确认

咱们来拆解下这个SVG的效果逻辑——它最终会呈现出一个带模糊效果的红色圆形，这正好验证了滤镜（filter）会先于遮罩（mask）应用的规则，而且这个表现在所有现代浏览器里都是完全一致的。

下面是完整的SVG代码：

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

关键细节解释： #

• 首先在<defs>标签里定义了两个可复用的元素：
  • 滤镜#f1：通过feGaussianBlur给元素添加了标准差为10的模糊效果，数值越大模糊程度越高
  • 遮罩#m1：用一个白色圆形作为遮罩模板——SVG遮罩里，白色区域会保留被遮罩元素的内容，黑色区域则会隐藏内容
• 最后是红色矩形元素：它同时声明了mask和filter属性。根据SVG的渲染规则，滤镜会先对整个矩形生效，让矩形变成模糊的红色块；之后遮罩再把模糊后的矩形裁剪成圆形形状，所以最终我们看到的是一个边缘模糊的红色圆形。

内容的提问来源于stack exchange，提问作者Waruyama