SVG填充颜色透明度/ alpha？

309

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

我尝试添加两个值来填充标签（从填充=“＃044B94”改变它来填充=“＃044B9466”），但这并不工作。

483

您使用addtional属性; fill-opacity：该属性的取值范围为0.0到1.0之间的一个十进制数;其中0.0是完全透明的。

例如：

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

此外，您有以下：尚未对行程

opacity

2011-05-18 09:32:59

MDN在其SVG教程https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes – 2014-02-15 22:30:46

中提供了有关此和其他相关属性的良好概述，您还可以将它们放入样式属性： – PeterVermont 2016-07-26 21:35:15

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

2011-05-18 16:31:00

查看http://www.w3.org/TR/SVG/painting.html#FillProperties（向下滚动一下以获取不透明度）;这对我来说看起来很完美。 – 2011-05-19 05:56:02

@williham：是的填充不透明是在SVG的建议，并没有问题，使用它。 CSS3语法使用CSS3 Color，这远离成为W3C推荐的一步。 SVG 1.1没有引用CSS3 Color，因为它当时不可用，未来的SVG版本可能会这样。 – 2011-05-19 08:40:22

啊。我似乎误解了你的答案，因为“没有完全标准化的解决方案，但是：...”;这将是错误的。仍然;使用rgba（）当你有一个独立的不透明度值进行调整时，使用rgba（）似乎毫无意义。 – 2011-05-19 08:58:45

fill="#044B9466"

这是SVG内部的RGBA color，具有十六进制值来定义。这是有效的，但并不是所有的程序都能正确显示它...

截至2017年8月：在Mozilla Firefox（54），Apple Safari（10.1）和Mac OS X Finder的“Quick View ”。但Google Chrome（60.0）不能正确显示此颜色;它只会显示为黑色。

2017-08-07 10:07:20

你知道他们最近是否改变了一些东西吗？我有一个工作的chrome应用程序使用了fill：rgb（...），现在它完全被破坏了。我很感激你的帮助！ – Mariodiar 2017-08-16 03:32:27

Qt SVG库（Qt 5.9.3）也不能像“＃00000000”十六进制格式和“rgba”那样处理RGBA颜色。 – bkausbk 2018-01-24 14:16:49

回答