如何在 SVG 中的蒙版后应用过滤器？答案

【问题标题】：How to apply a filter after a mask in SVG?如何在 SVG 中的蒙版后应用过滤器？
【发布时间】：2016-05-31 05:36:54
【问题描述】：

我有以下 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：在这个简单的例子中，使用掩码没有多大意义。只是为了说明问题。

【问题讨论】：

标签： svg web cross-browser mask svg-filters

【解决方案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>

【讨论】：