一种方法是添加一个
feComponentTransfer
过滤器基元,如下所示:
<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>
可以在这里看到一个实例。
一种方法是简单地使用
opacity: 0.5
。为此,不要创建将投影与顶部的原始源合并的过滤器,而是为only投影创建一个过滤器,并将其应用到引用源形状的<use>
标签。
这种方法还有其他优点。例如,现在您可以仅对阴影应用单独的样式。
#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>
设置 alpha 值的另一种方法是使用
feColorMatrix
过滤器基元。使用它您可以同时设置 alpha 值和阴影的颜色。
下面的滤镜将 alpha 值乘以
0.2
,同时将阴影的颜色设置为红色。
<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>
但是如果您只需要更改 alpha 值,
feComponentTransfer
过滤器基元可能是更好的选择。
我的情况是,我将 svg 中的每个路径或项目设置为遮罩过滤器,之后我将设置不透明度路径:0 并使用过渡不透明度:1