SVG填充颜色透明度/ alpha？

416

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

我尝试将两个值添加到fill标签（将其从更改fill="#044B94"为fill="#044B9466"），但这不起作用。

colors  svg  transparency  alpha  fill 
— 奥利·格拉斯
source
对于有兴趣的人，收到了一个空的填充点击：查看SVG检测的onclick事件的“补：无” -即可能使用fill="none"与pointer-events="visible"。
— Fabien Snauwaert

Answers:

645

您使用附加属性；fill-opacity：此属性采用介于0.0和1.0之间的十进制数字（含）；其中0.0是完全透明的。

例如：

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

此外，您还有以下内容：

  • stroke-opacity 中风的属性
  • opacity 对于整个对象
— 威廉·托特兰
source
3
— t-mart
4
您还可以将它们放在样式属性中：<rect style =“ fill：＃044B94; fill-opacity：0.4;” />
— PeterVermont 2016年
在上面，应将“ fill-opacity”和“ stroke-opacity”替换为“ fill_opacity”和“ stroke_opacity”（即用下划线替换连字符）。
— mermaldad
1
@mermaldad那是不正确的；参见规格。在某些不允许名称包含连字符的语言中，用于SVG的库使用的名称为fill_opacity，但在SVG和CSS中为fill-opacity。
— Williham Totland
@WillihamTotland，感谢您的纠正。我在脑海中直跳到“如何在Python中使用svgwrite实现此功能”。在那里，您需要用下划线替换连字符。
— mermaldad
78

作为尚未完全标准化的解决方案（尽管与CSS3中的颜色语法保持一致），可以使用例如fill="rgba(124,240,10,0.5)"。在Firefox，Opera，Chrome中运行良好。

这是一个例子。

— 埃里克·达尔斯特罗姆
source
3
查看w3.org/TR/SVG/painting.html#FillProperties（向下滚动以了解填充不透明度）；在我看来，这已经完全标准化了。
— 威廉·托特兰
10
@williham：是的，SVG建议使用填充不透明度，并且使用它没有问题。CSS3语法采用CSS3颜色，距离成为w3c建议仅一步之遥。SVG 1.1并未引用CSS3颜色，因为当时尚不可用，将来的SVG版本可能会提供。
— ErikDahlström，
7
只是想提一下，Inkscape中一个似乎不起作用的地方
— George Mauer 2012年
2
我在Highcharts上使用了此解决方案，并且有效。它转换rgba到rgb并自动添加的fill-opacity属性给它。我不确定这是否也适用于普通的SVG，但这就是它的工作方式。无论哪种方式，谢谢。
— 汉娜（Hanna）2014年
3
我可以澄清一下哪些浏览器实际上在嵌入式svgs中支持rgba吗？
— redanimalwar
6 
fill="#044B9466"

这是SVG内部以十六进制表示的RGBA颜色，由十六进制值定义。这是有效的，但并非所有程序都能正确显示它...

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

自2017年8月起：RGBA填充颜色将在Mozilla Firefox（54），Apple Safari（10.1）和Mac OS X Finder的“快速查看”中正确显示。但是，直到版本62（以前启用了“实验平台功能”标志的版本54才支持），谷歌浏览器才支持该语法。

— 先生IDE
source
您知道他们最近是否更改了某些内容？我有一个使用fill：rgb（...）的chrome应用程序，现在它已经完全坏了。我将感谢您的帮助！
— Mariodiar
Qt SVG库（Qt 5.9.3）也无法处理RGBA颜色，无论是“＃00000000”十六进制形式还是“ rgba”形式。
— bkausbk
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.