是否可以在 SVG 填充颜色上设置透明度或 alpha 级别？
我尝试向填充标签添加两个值（将其从 更改fill="#044B94"为fill="#044B9466"），但这不起作用。
问问题
410059 次
7 回答
751
您使用附加属性；fill-opacity：此属性采用 0.0 和 1.0 之间的十进制数，包括 0.0 和 1.0；其中 0.0 是完全透明的。
例如：
<rect ... fill="#044B94" fill-opacity="0.4"/>
此外，您还有以下内容：
stroke-opacity笔画属性opacity对于整个对象
于 2011-05-18T09:32:59.023 回答
83
作为尚未完全标准化的解决方案（尽管与 CSS3 中的颜色语法一致），您可以使用例如fill="rgba(124,240,10,0.5)". 在 Firefox、Opera、Chrome 中运行良好。
于 2011-05-18T16:31:00.967 回答
10
fill="#044B9466"
这是 SVG 内以十六进制表示的RGBA 颜色，用十六进制值定义。这是有效的，但并非所有程序都能正确显示它...
您可以在此处找到此语法的浏览器支持：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
于 2017-08-07T10:07:20.627 回答
2
要使填充完全透明，fill="transparent"似乎可以在现代浏览器中使用。但它在 Microsoft Word（Mac 版）中不起作用，我不得不使用fill-opacity="0".
于 2019-05-14T08:30:04.263 回答
2
要更改 svg 代码的透明度，最简单的方法是在任何文本编辑器上打开它并查找样式属性。样式的显示方式取决于 svg 创建者。由于我是 Inkscape 用户，它设置样式值的常用方法是通过样式标记，就像它是 html 一样，但使用 svg 原生属性，如、fill、stroke等。影响整个 svg 对象，或其中声明的路径或组 和，只会影响填充和描边透明度。也就是说，我也使用并尝试过使用而不是使用use 代替 rgba 标准，就像在 css 中一样。这适用于必须的现代浏览器。stroke-widthopacityopacityfill-opacitystroke-opacityfill#fffrgba(255, 255, 255, 1)
请记住，如果您打算进一步重新编辑您的 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 通道，因此已将其删除。
于 2021-02-08T18:38:15.053 回答
0
我正在分享一个相关提示，当您希望 SVG 继承容器的样式（如正常状态、悬停状态和访问状态）时，您可能会遇到该提示：在路径上使用 fill='currentColor'。这就是字体真棒图标生成的 SVG 可以将任何前景色应用于字体的方式！
于 2021-09-24T05:07:46.283 回答