SVG填充颜色透明度/Alpha？

Question

在SVG填充颜色中设置透明度或alpha级别是否可行？

我已经尝试在填充标签中添加两个值（将其从fill="#044B94"更改为fill="#044B9466"），但是这并不起作用。

- Ollie Glass

---

对于任何有兴趣的人，要在空填充区域接收点击，请参见 SVG Detect Onclick events on “fill: none” - 即使用fill="none"和pointer-events="visible"的可能性。 - Fabien Snauwaert

Answer 1

你使用了一个额外的属性：fill-opacity：该属性接受一个介于0.0和1.0之间（包含0.0和1.0）的十进制数，其中0.0表示完全透明。

例如：

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

此外，您还有以下内容：

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

- Williham Totland

---

MDN在其SVG教程中提供了有关this和其他相关属性的很好的概述，链接为https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes。 - t-mart

你可以将这些内容放在style属性中：<rect style="fill:#044B94;fill-opacity: 0.4;" />。 - PeterVermont

在上述代码中，“fill-opacity”和“stroke-opacity”应该替换为“fill_opacity”和“stroke_opacity”（即，用下划线代替连字符）。 - mermaldad

@mermaldad 这是不正确的; 请参阅规范。在一些不允许名称包含连字符的语言中，用于处理SVG的库使用类似fill_opacity的名称，但在SVG和CSS中，它是fill-opacity。 - Williham Totland

@WillihamTotland，感谢您的纠正。我在脑海中直接跳到了“如何使用Python中的svgwrite实现这一点”。在那里，您需要用下划线替换连字符。 - mermaldad

Answer 2

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

这里有一个示例。

- Erik Dahlström

---

看 http://www.w3.org/TR/SVG/painting.html#FillProperties (向下滚动一点查看 fill-opacity)；在我的看来这已经非常完全地标准化了。 - Williham Totland

@williham：是的，fill-opacity在SVG推荐中已经有了，使用它没有问题。CSS3语法在CSS3颜色中，这一步距离成为w3c推荐仅有一步之遥。SVG 1.1没有引用CSS3颜色，因为当时还不存在，未来版本的SVG可能会引用它。 - Erik Dahlström

只想提一下，这个似乎不起作用的地方是在Inkscape中。 - George Mauer

我在Highcharts上使用了这个解决方案，它有效地将rgba转换为rgb并自动添加了fill-opacity属性。我不确定这是否也适用于普通的SVG，但在那里它是这样工作的。无论如何，谢谢。 - Hanna

我能否得到一些澄清，哪些浏览器实际上支持内联SVG中的RGBA？ - redanimalwar

Answer 3

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

更新： 根据下面Alex Henrie的评论，fill="none"可能是更好的选择。

- Brett Donald

---

对于Inkscape矢量图形编辑器0.92.4.0，fill="none"有效，但fill="transparent"无效。 - samm

fill="none" 是标准的方法，适用于 Inkscape、Firefox、Chrome 或任何其他 SVG 应用程序。详见 https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint - Alex Henrie

请注意 - fill:none 不会响应指针事件。将其视为“开放的窗口” - 而fill:transparent或fill-opacity:0则是完全干净的窗口（任何鸟都会撞上它）codepen。 - herrstrietzel

Answer 4

fill="#044B9466"

这是在SVG内使用十六进制值定义的RGBA颜色。这种方式是有效的，但并非所有程序都能正确地显示它。

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

截至2017年8月：Mozilla Firefox（54）、Apple Safari（10.1）和Mac OS X Finder的“快速查看”功能可以正常显示RGBA填充颜色。然而，Google Chrome直到版本62才支持此语法（之前需要启用实验性平台功能标志）。

截至2021年4月，Inkscape 1.0.2版本无法读取SVG文件中的此格式，而是将任何RGBA颜色转换为不透明黑色。Bug报告在此处：https://gitlab.com/inkscape/inbox/-/issues/1195

- Mr-IDE

---

你知道最近是否有任何更改吗？我有一个可用的Chrome应用程序，它使用了fill:rgb(...)，但现在完全无法工作。我很感激您的帮助！ - Mariodiar

Qt SVG库（Qt 5.9.3）目前也无法处理RGBA颜色，无论是以“＃00000000”十六进制形式还是“rgba”形式。 - bkausbk

这在Inkscape中不起作用，也不在我的其他图像查看器中起作用。但它在Firefox、Chrome和Edge中可以正常工作。 - mihca

Answer 5

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

默认值为1，最小值为0，可以使用十进制值进行步进。例如：0.5 = alpha的50%。注意：必须定义fill颜色才能应用fill-opacity。

请查看我的示例。

参考资料。

- Darlan Dieterich

Answer 6

要在svg代码中更改透明度的最简单方法是在任何文本编辑器中打开它并查找样式属性。样式的显示方式取决于svg创建者的方式。由于我是Inkscape用户，通常设置样式值的方式是通过样式标记，就像html一样，但是使用svg本机属性，例如fill、stroke、stroke-width、opacity等。opacity会影响整个svg对象、路径或组，在其中声明fill-opacity、stroke-opacity只会影响填充和描边的透明度。也就是说，我也用过并尝试仅使用fill，而不是使用#fff，而是使用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和stroke-opacity已被移除，因为rgba标准在两种情况下都涵盖了颜色和alpha通道。

- SIMBIOSIS surl

Answer 7

我在这里分享一个相关的技巧，当你想让SVG继承容器的样式（如普通状态、悬停状态和访问状态）时，可以使用fill='currentColor'来设置路径的填充颜色。这就是Font Awesome图标生成的SVG可以应用于任何字体颜色的原因！

- Arulvel