Search code examples
scalesvg-filters

SVG Filter: Scale

I have a svg graphic with a shadow attached to it using a svg filter. I need to scale the shadow but can't find a filter that can do this. Do anyone know if this is possible?

<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

Solution

  • You can enlarge the shadow by using a blur, and then use an opacity mapping (using feComponentTransfer/feFuncA) to dial up the values inside the edges of the blurred shadow to .12 - the value of your flood opacity. Something like this: 

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

    I should note that your original code had a hanging reference - the opacityBlurOffset used as your feMergeNode "in" didn't reference a previous result.