如何降低 svg 滤镜中 Alpha 层的不透明度？

Posted 2023-03-06

【中文标题】如何降低 svg 滤镜中 Alpha 层的不透明度？

【英文标题】：How to lower the opacity of the alpha layer in an svg filter?

【发布时间】：2013-01-29 17:29:34

【问题描述】：

我正在尝试将徽标创建为 SVG。我从 Illustrator 导出了文件。徽标上有一个阴影。我正在查看 XML 并找到了过滤器节点

<filter  filterUnits="objectBoundingBox"   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>

有没有办法改变生成的 offsetBlurredAlpha 的 alpha 值？我不希望它从纯黑色开始，我希望它从 50% 黑色开始，以便对象周围的阴影效果足够亮。

【参考方案1】：

一种方法是添加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>

可以看到一个活生生的例子here。

【讨论】：

完美就是我想要的。斜率值是否从 0.1 变为 1？只是好奇这些限制。

见w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute - 斜率可以是任何数字，C' = slope * C + intercept 定义结果。

【参考方案2】：

一种方法是简单地使用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" >
	<defs>
		<filter id="dropshadow" >
			<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>

【参考方案3】：

设置 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 过滤器原语可能是更好的选择。