SVG填充颜色透明度/阿尔法？

您使用附加属性； fill-opacity：此属性采用 0.0 和 1.0 之间的十进制数，包括 0.0 和 1.0；其中 0.0 是完全透明的。

例如：

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

此外，您还有以下内容：

笔画的笔画不透明度属性

整个对象的不透明度

---

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

Here's an example。

---

fill="#044B9466"

这是 SVG 中十六进制表示法的 RGBA color，用十六进制值定义。这是有效的，但并非所有程序都能正确显示它...

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

截至 2017 年 8 月：RGBA 填充颜色将在 Mozilla Firefox (54)、Apple Safari (10.1) 和 Mac OS X Finder 的“快速查看”中正确显示。然而，谷歌浏览器直到版本 62 才支持这种语法（之前在版本 54 中启用了 Experimental Platform Features 标志支持）。

自 2021 年 4 月起，Inkscape 版本 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。

请参阅my example。

References。

---

为了使填充完全透明，fill="transparent" 似乎可以在现代浏览器中使用。但它在 Microsoft Word（Mac 版）中不起作用，我不得不使用 fill-opacity="0"。

---

要更改 svg 代码的透明度，最简单的方法是在任何文本编辑器上打开它并查找样式属性。样式的显示方式取决于 svg 创建者。由于我是 Inkscape 用户，它设置样式值的常用方法是通过样式标记，就像它是 html 一样，但使用 svg 原生属性，如 fill、stroke、stroke-width、opacity 等。 opacity 影响整个 svg 对象，或路径或组，其中声明的和 fill-opacity、stroke-opacity 将仅影响填充和描边透明度。也就是说，我也使用并尝试只使用 fill，而不是使用 #fff，而是使用像 rgba(255, 255, 255, 1) 这样的 rgba 标准，就像在 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 通道。

---

我正在分享一个相关提示，当您希望 SVG 继承容器的样式（如正常状态、悬停状态和访问状态）时，您可能会遇到该提示：在路径上使用 fill='currentColor'。这就是字体真棒图标生成的 SVG 可以将任何前景色应用于字体的方式！

---