SVG 过滤器：比例

Question

我有一个 svg 图形，使用 svg 滤镜附加了一个阴影。我需要缩放阴影，但找不到可以执行此操作的滤镜。有谁知道这是否可能？

<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet">
    <filter id="shadow" class="shadow" width="200%" height="200%">
        <feOffset           dx="0" dy="30"              in="SourceAlpha"    result="offset" />
        <feFlood            flood-opacity="0.12"                            result="opacity" />
        <feComposite                                    operator="in"       in="opacity"        in2="offset"    result="opacityOffset"  />
        <feMerge class="everything">
            <feMergeNode in="opacityBlurOffset" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
    <circle class="circle"
            cx="50" 
            cy="50" 
            r="40"
            fill="tomato"
            filter="url(#shadow)"/>
</svg>

http://codepen.io/bradjohnwoods/pen/XXMPGY

Answer 1

您可以使用模糊来放大阴影，然后使用不透明度映射（使用 feComponentTransfer/feFuncA）将模糊阴影边缘内的值调至 0.12 - 泛光不透明度的值。像这样的东西：

<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet">
	<filter id="shadow" class="shadow" width="200%" height="200%">
		<feOffset 			dx="0" dy="30" 				in="SourceAlpha"	result="offset" />
		<feFlood 			flood-opacity="0.12"							result="opacity" />
		<feComposite 									operator="in"       in="opacity"		in2="offset"	result="opacityOffset"	/>
		<feGaussianBlur stdDeviation="5"/>
		<feComponentTransfer result="opacityBlurOffset">
			<feFuncA type="table" tableValues="0 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12"/>
		</feComponentTransfer>
		
		
		<feMerge class="everything">
			<feMergeNode in="opacityBlurOffset" />
			<feMergeNode in="SourceGraphic" />
		</feMerge>
	</filter>
	<circle class="circle"
			cx="50" 
			cy="50" 
			r="40"
			fill="tomato"
			filter="url(#shadow)"/>
</svg>

我应该注意到，您的原始代码有一个悬挂引用 - 用作 feMergeNode“in”的 opacityBlurOffset 没有引用以前的结果。