SVG填充颜色透明度/ alpha?

你使用一个额外的属性;fill-opacity:此属性接受0.0到1.0之间的十进制数，包括;其中0.0是完全透明的。

例如:

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

此外，你有以下:

• stroke-opacity属性用于描边
• opacity用于整个对象

作为一个尚未完全标准化的解决方案(尽管与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月，之版本1.0.2不能在SVG文件中读取这种格式，而是将任何RGBA颜色转换为不透明的黑色。错误报告在这里:https://gitlab.com/inkscape/inbox/-/issues/1195

在SVG元素中使用属性fill-opacity。

默认值为1，最小值为0，在步进中使用十进制值EX: 0.5 = alpha的50%。注意:必须定义fill颜色才能应用fill-opacity。

看到我的例子。

参考文献。

为了使填充完全透明，fill="transparent"似乎在现代浏览器中工作。但它在微软Word (Mac版)中不起作用，我不得不使用fill-opacity="0"。

更新

根据下面来自亚历克斯Henrie的评论，fill="none"可能是更好的选择。

要更改svg代码的透明度，最简单的方法是在任何文本编辑器中打开它并查找样式属性。这取决于svg创建者显示样式的方式。因为我是一个Inkscape用户，它设置样式值的通常方式是通过一个样式标签，就像它是html一样，但使用svg的原生属性，如fill， stroke， stroke-width， opacity等。opacity会影响整个svg对象、路径或组，而fill-opacity、stroke-opacity只会影响填充和描边透明度。也就是说，我也使用和尝试只使用fill，而不是使用__abc8，而是使用rgba标准，如rgba(255, 255, 255, 1)，就像在css中一样。这适用于现代浏览器。

请记住，如果您打算进一步重新编辑svg，根据我的经验，最好的做法是始终保持一个原始版本在手边。Inkscape在手动修改svg方面更加灵活，但Illustrator和CorelDraw可能会在导入和编辑svg方面存在问题。

例子

<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

示例2

<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

示例3

<path style="fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

注意，在最后一个例子中，fill-opacity and stroke-opacity已经被删除，因为rgba标准在这两种情况下都覆盖了颜色和alpha通道。