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

回答