如何在 SVG 蒙版后应用过滤器？

Question

我有以下 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <mask id="mask">
  <rect x="0" y="0" width="100" height="100" fill="white"/>
  <circle cx="50" cy="50" r="33" fill="black"/>
 </mask>
 
 <filter id="dropShadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  <feOffset dx="4" dy="4"/>
  <feMerge>
   <feMergeNode/>
   <feMergeNode in="SourceGraphic"/>
  </feMerge>
 </filter>
 
 <circle cx="50" cy="50" r="50" fill="green" filter="url(#dropShadow)" mask="url(#mask)"/>
</svg>

基本上就是一个带阴影的戒指。
问题是阴影在圆环的内侧是不可见的，因为滤镜是在圆被遮罩之前应用到圆上的。

但我正在寻找的是将滤镜应用于已经被遮罩的对象。
我该怎么做？

PS：在这个简单的例子中，使用掩码没有多大意义。只是为了说明问题。

Answer 1

将过滤器应用到蒙版对象的父对象，例如

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <mask id="mask">
  <rect x="0" y="0" width="100" height="100" fill="white"/>
  <circle cx="50" cy="50" r="33" fill="black"/>
 </mask>
 
 <filter id="dropShadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  <feOffset dx="4" dy="4"/>
  <feMerge>
   <feMergeNode/>
   <feMergeNode in="SourceGraphic"/>
  </feMerge>
 </filter>
 
    <g filter="url(#dropShadow)">
     <circle cx="50" cy="50" r="50" fill="green" mask="url(#mask)"/>
    </g>
</svg>

如何在 SVG 蒙版后应用过滤器？

How to apply a filter after a mask in SVG?

svg

mask

cross-browser

web

svg-filters