SVG fill color transparency / alpha?
是否可以在SVG填充颜色上设置透明度或Alpha级别？
我尝试将两个值添加到fill标签(将其从fill ="＃044B94"更改为fill ="＃044B9466")，但这不起作用。
您使用附加属性； fill-opacity：此属性采用介于0.0到1.0之间的十进制数字(含)；其中0.0是完全透明的。
例如：
1
| <rect ... fill="#044B94" fill-opacity="0.4"/> |
此外，您还有以下内容：
-
笔划的stroke-opacity属性
-
整个对象的opacity
-
MDN在其SVG教程developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/中提供了有关此属性以及其他相关属性的良好概述。
-
您还可以将它们放在样式属性中：
作为尚未完全标准化的解决方案(尽管与CSS3中的颜色语法保持一致)，您可以使用例如fill="rgba(124,240,10,0.5)"。在Firefox，Opera，Chrome中运行良好。
这是一个例子。
-
查看w3.org/TR/SVG/painting.html#FillProperties(向下滚动以了解填充不透明度)；在我看来，这已经完全标准化了。
-
@williham：是的，SVG建议中包含填充不透明度，并且使用它没有问题。 CSS3语法采用CSS3颜色，距离成为w3c建议仅一步之遥。 SVG 1.1并未引用CSS3颜色，因为当时尚不可用，将来的SVG版本可能会提供。
-
啊。我似乎误解了您的答案，因为"没有完全标准化的解决方案，但是：…"；这是错误的。仍然;当您需要调整独立的不透明度值时，使用rgba()似乎毫无意义。
-
如果您主要使用CSS，则您可能希望相同的颜色在SVG中也可以"正常工作"，对吗？对齐是一件好事，再加上hsla()语法带来了更多功能(在svg中支持rgba()的浏览器中也应使用)。
-
只是想提一下，Inkscape中一个似乎不起作用的地方
-
我在Highcharts上使用了此解决方案，并且有效。它将rgba转换为rgb，并自动向其中添加了fill-opacity属性。我不确定这是否也适用于普通的SVG，但是那就是它的工作方式。无论哪种方式，谢谢。
-
我可以澄清一下哪些浏览器实际上在嵌入式svgs中支持rgba吗？
-
@redanimalwar Chrome 66目前还没有这样做。
-
@Brandito这个示例在Chrome 66中可以正常工作，不确定您的意思。
-
这似乎不为我工作。 (Version 74.0.3729.131 (Official Build) (64-bit) (cohort: 74_131_Win)在Windows 7 Service Pack 1 Build 7601.24411上运行)
这是SVG内部以十六进制表示的RGBA颜色，由十六进制值定义。这是有效的，但并非所有程序都能正确显示它...
您可以在此处找到对此语法的浏览器支持：https://caniuse.com/#feat=css-rrggbbaa
自2017年8月起：RGBA填充颜色将在Mozilla Firefox(54)，Apple Safari(10.1)和Mac OS X Finder的"快速查看"中正确显示。但是，直到版本62(以前启用了"实验平台功能"标志的版本54才支持)，谷歌浏览器才支持该语法。
-
您知道他们最近是否更改了某些内容？我有一个使用fill：rgb(...)的chrome应用程序，现在它已经完全坏了。我将感谢您的帮助！
-
Qt SVG库(Qt 5.9.3)也无法处理RGBA颜色，无论是"＃00000000"十六进制格式还是" rgba"。
为了使填充完全透明，fill="transparent"似乎可以在现代浏览器中使用。但这在Microsoft Word(对于Mac)中不起作用，我不得不使用fill-opacity="0"。
在SVG元素中使用属性fill-opacity。
默认值为1，最小值为0，在步骤中使用十进制值EX：0.5 = alpha的50％。注意：必须定义fill颜色以应用fill-opacity。
看我的例子。
引用。