xmlsvgadobe-illustratorsvg-filters

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


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.


Solution

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