How to lower the opacity of the alpha layer in an svg filter?

Question

I'm trying to create a logo as an SVG. I exported the file from Illustrator. The logo has a drop shadow on it. I was looking through the XML and I found the filter node

<filter  filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2">
<feGaussianBlur  stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur>
<feOffset  result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset>
<feMerge>
    <feMergeNode  in="offsetBlurredAlpha"></feMergeNode>
    <feMergeNode  in="SourceGraphic"></feMergeNode>
</feMerge>

Is there a way to change the alpha of the offsetBlurredAlpha generated? I don't want it to start at pure black I want it to start at 50% black so that the shadow effect is light enough around the object.

Mclaurin

Answer 1

One way is to add a feComponentTransfer filter primitive, like this:

<filter id="dropshadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
  <feOffset dx="2" dy="2"/>
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.2"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>

A live example can be seen here.

Photoelasticity

Perfect just what I was looking for. Does the slope value go from 0.1 - 1? Just curious of the limitations. – Mclaurin

See w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute - slope can be any number, C' = slope * C + intercept defines the outcome. – Titration

Answer 2

One way is to simply use opacity: 0.5. To do this, instead of creating a filter that merges the dropshadow with the original source on top, create a filter for only the dropshadow, and apply it to a <use> tag that references the source shape.

There are other advantages to this approach. For example, now you can apply separate styling to just the shadow.

#arrow-shadow {
	opacity:0.5;
}
g:hover #arrow-shadow {
	opacity:0.7;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px">
	<defs>
		<filter id="dropshadow" height="130%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
			<feOffset dx="2" dy="2" result="offsetblur" />
		</filter>
	</defs>
	<g fill="#EEE">
		<use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use>
		<polygon id="polygon"
				points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/>
		
	</g>
</svg>

Escobedo

Answer 3

An alternative way of setting the alpha value is using the feColorMatrix filter primitive. Using this you can set alpha value and the color of a drop shadow at the same time.

The filter below multiplies the alpha value by 0.2 and at the same time sets the color of the drop shadow to red.

<filter id="dropshadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
  <feOffset dx="2" dy="2"/>
  <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>

But if you only need to change the alpha value, the feComponentTransfer filter primitive is probably the better choice.

Coarse

Answer 4

Set every path or item in SVG a mask filter, and set opacity path:0 and use transition opacity: 1

Disinherit