是否可以在SVG填充颜色上设置透明度或alpha级别?

我尝试向填充标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466"),但这不起作用。


当前回答

我分享一个相关的技巧,当你想让SVG继承容器的样式,如正常状态,悬停状态和访问状态时,你可能会遇到: 在路径上使用fill='currentColor'。这就是SVG是如何产生的字体awesome图标可以采取任何前色应用到字体!

其他回答

我分享一个相关的技巧,当你想让SVG继承容器的样式,如正常状态,悬停状态和访问状态时,你可能会遇到: 在路径上使用fill='currentColor'。这就是SVG是如何产生的字体awesome图标可以采取任何前色应用到字体!

要使填充完全透明,fill="transparent"在现代浏览器中似乎是有效的。但它在微软Word (Mac版)中不起作用,我不得不使用fill-opacity="0"。

更新

根据下面Alex Henrie的评论,fill="none"可能是更好的选择。

fill="#044B9466"

这是SVG中十六进制符号的RGBA颜色,用十六进制值定义。这是有效的,但不是所有程序都能正确显示它…

您可以在这里找到对该语法的浏览器支持:https://caniuse.com/#feat=css-rrggbbaa

截至2017年8月:RGBA填充颜色将在Mozilla Firefox (54), Apple Safari(10.1)和Mac OS X Finder的“快速视图”上正常显示。然而,谷歌Chrome直到62版才支持此语法(之前由54版支持,实验平台功能标志启用)。

截至2021年4月,Inkscape版本1.0.2无法在SVG文件中读取这种格式,而是将任何RGBA颜色转换为不透明的黑色。错误报告在这里:https://gitlab.com/inkscape/inbox/-/issues/1195

在SVG元素中使用fill-opacity属性。

默认值为1,最小值为0,在步进中使用十进制值EX: 0.5 = alpha的50%。注意:有必要定义填充颜色来应用填充不透明度。

请看我的例子。

参考文献

你使用一个额外的属性;fill-opacity:该属性接受一个介于0.0到1.0之间的十进制数;其中0.0是完全透明的。

例如:

<rect ... fill="#044B94" fill-opacity="0.4"/>

此外,你有以下:

描边的描边不透明度属性 整个对象的不透明度