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

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

＆＃13;

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

＆＃13;

如何在SVG中使用掩码后应用过滤器？

1 个答案: