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

ddilsaver picture ddilsaver · Feb 14, 2013 · Viewed 14.9k times · Source

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.

Answer

Erik Dahlstr&#246;m picture Erik Dahlström · Feb 14, 2013

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.