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）将模糊阴影边缘内的值调到.12 - 泛光不透明度的值。像这样：

＆＃13;

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

＆＃13;

我应该注意到你的原始代码有一个悬挂引用 - 用作feMergeNode＆＃34;的opacityBlurOffset＆＃34;没有引用先前的结果。

Answer 2

对于正在寻找的人。像上面的解决方案一样，但没有嘈杂的边缘：

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="41.66666666666667" vector-effect="non-scaling-stroke" style="overflow: visible; width: 100%; height: 100%; pointer-events: none;">
    <defs>
        <linearGradient id="gradient-647049" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="#320606" stop-opacity="100"></stop>
            <stop offset="100%" stop-color="#FF0000" stop-opacity="100"></stop>
        </linearGradient>
        <filter id="shadow" color-interpolation-filters="sRGB" x="-100%" y="-100%" width="300%" height="300%">
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" in="SourceGraphic" result="shadow_color"></feColorMatrix>
            <feGaussianBlur in="shadow_color" stdDeviation="5" result="a-shadow_blur"></feGaussianBlur>
        </filter>
    </defs>
    <use xlink:href="#shape"
        x="50" y="50" transform="scale(1.212)" filter="url(#shadow)"
        style="transform-origin: 50% 50% 0px;"></use>
    <ellipse id="shape" cx="125" cy="20.833333333333336" rx="120.5" ry="16.333333333333336" fill="url(#gradient-647049)"
        stroke="rgba(27,117,221,1)" stroke-width="9" stroke-linejoin="round"></ellipse>
</svg>

SVG过滤器：缩放

2 个答案: