如何在 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>