是否可以在 SVG 填充颜色上设置透明度或 alpha 级别？
我尝试向填充标记添加两个值（将其从 fill="#044B94" 更改为 fill="#044B9466"），但这不起作用。
【问题讨论】：
fill="none" 和 pointer-events="visible"。
标签： colors svg transparency alpha fill
您使用了附加属性； fill-opacity：该属性取一个介于 0.0 和 1.0 之间的十进制数，包括 0.0 和 1.0；其中 0.0 是完全透明的。
例如：
<rect ... fill="#044B94" fill-opacity="0.4"/>
此外，您还有以下内容：
stroke-opacity 笔画属性opacity 代表整个对象【讨论】：
fill_opacity 这样的名称，但在 SVG 和 CSS 中，它是 fill-opacity。
作为尚未完全标准化的解决方案（尽管与 CSS3 中的颜色语法一致），您可以使用例如 fill="rgba(124,240,10,0.5)"。在 Firefox、Opera、Chrome 中运行良好。
【讨论】：
rgba 转换为rgb 并自动为其添加fill-opacity 属性。我不确定这是否也是它在普通 SVG 中的工作方式，但这就是它在那里工作的方式。不管怎样，谢谢。
fill="#044B9466"
这是一个RGBA color，在 SVG 中以十六进制表示，用十六进制值定义。这是有效的，但不是所有程序都能正常显示...
您可以在此处找到对这种语法的浏览器支持：https://caniuse.com/#feat=css-rrggbbaa
截至 2017 年 8 月：RGBA 填充颜色将在 Mozilla Firefox (54)、Apple Safari (10.1) 和 Mac OS X Finder 的“快速查看”中正确显示。但是，Google Chrome 直到 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。
【讨论】：
为了使填充完全透明，fill="transparent" 似乎可以在现代浏览器中使用。但它在 Microsoft Word（Mac 版）中不起作用，我必须使用 fill-opacity="0"。
【讨论】：
fill="none" 有效，但fill="transparent" 无效。
fill="none" 是执行此操作的标准方法，它适用于 Inkscape、Firefox、Chrome 或任何其他 SVG 应用程序。见w3.org/TR/SVG2/painting.html#SpecifyingPaint
要更改 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 可以采用任何前景色应用于字体的方式！
【讨论】：