是否可以在SVG填充颜色上设置透明度或alpha级别?
我尝试向填充标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466")，但这不起作用。
当前回答
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
其他回答
你使用一个额外的属性;fill-opacity:该属性接受一个介于0.0到1.0之间的十进制数;其中0.0是完全透明的。
例如:
<rect ... fill="#044B94" fill-opacity="0.4"/>
此外，你有以下:
描边的描边不透明度属性 整个对象的不透明度
作为一个尚未完全标准化的解决方案(尽管与CSS3中的颜色语法一致)，你可以使用例如fill="rgba(124,240,10,0.5)"。在Firefox, Opera, Chrome中工作良好。
举个例子。
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
要使填充完全透明，fill="transparent"在现代浏览器中似乎是有效的。但它在微软Word (Mac版)中不起作用，我不得不使用fill-opacity="0"。
更新
根据下面Alex Henrie的评论，fill="none"可能是更好的选择。
在SVG元素中使用fill-opacity属性。
默认值为1，最小值为0，在步进中使用十进制值EX: 0.5 = alpha的50%。注意:有必要定义填充颜色来应用填充不透明度。
请看我的例子。
参考文献
