Colors SVG填充颜色透明度/alpha？

是否可以在SVG填充颜色上设置透明度或alpha级别

---

我尝试向fill标记添加两个值（将其从

fill=“#044B94”

更改为

fill=“#044B9466”

），但这不起作用<代码>填充不透明度：此属性采用0.0和1.0（含0.0和1.0）之间的十进制数字；其中0.0是完全透明的

例如：

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

此外，您还具有以下功能：

• 笔划不透明度

  笔划的属性

• 整个对象的不透明度

---

作为尚未完全标准化的解决方案（尽管与CSS3中的颜色语法一致），您可以使用例如

fill=“rgba（124240,10,0.5）”

。在Firefox、Opera和Chrome中工作良好

这是SVG内部的十六进制表示法，由十六进制值定义。这是有效的，但并非所有程序都能正确显示它

您可以在此处找到此语法的浏览器支持：

截至2017年8月：RGBA填充颜色将在Mozilla Firefox（54）、Apple Safari（10.1）和Mac OS X Finder的“快速查看”中正确显示。然而，Google Chrome直到版本62才支持这种语法（之前在启用实验平台功能标志的情况下从版本54支持）

---

截至2021年4月，1.0.2版无法在SVG文件中读取此格式，而是将任何RGBA颜色转换为不透明黑色。错误报告如下：

在SVG元素中使用属性

填充不透明度

默认值为1，最小值为0，在步骤中使用十进制值，例如：0.5=α的50%。注意：必须定义

填充

颜色以应用

填充不透明度

看

---

.

为了使填充完全透明，在现代浏览器中，

fill=“transparent”

似乎可以工作。但它在Microsoft Word（Mac）中不起作用，我必须使用

fill opacity=“0”

来更改svg代码的透明度最简单的方法是在任何文本编辑器上打开它并查找样式属性。样式的显示方式取决于svg创建者。由于我是Inkscape用户，它设置样式值的通常方式是通过样式标记，就像它是html一样，但使用svg本机属性，如

填充

，

笔划

，

笔划宽度

，

不透明度

等等<代码>不透明度影响整个svg对象，或其指定的路径或组，

填充不透明度

，

笔划不透明度

仅影响填充和笔划透明度。也就是说，我也曾使用过并且尝试过只使用

fill

，而不是使用

#fff

像css一样使用rgba标准。这对于现代浏览器来说很好

请记住，根据我的经验，如果您打算进一步重新编辑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:#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"/>

---

请注意，在上一个示例中，

填充不透明度

已被删除，因为rgba标准同时覆盖颜色和alpha通道。

查看（向下滚动一点填充不透明度）；在我看来，这是完全标准化的。@williham：是的，SVG推荐使用填充不透明度，使用它没有问题。CSS3语法采用CSS3颜色，这离成为w3c推荐标准还有一步之遥。SVG1.1没有引用CSS3颜色，因为它在当时不可用，SVG的未来版本可能会提供。只想提到，在Inkscape中，这似乎不起作用。我在Highcharts上使用了此解决方案，它起到了作用。它将

rgba

转换为

rgb

，并自动添加

fill opacity

属性。我不确定这是否也是它在普通SVG中的工作方式，但这就是它在那里的工作方式。不管怎样，谢谢。我能澄清一下哪些浏览器在内联SVG中实际支持rgba吗？MDN在SVG教程中提供了关于此属性和其他相关属性的良好概述，您也可以将它们放在样式属性中：在上面的“填充不透明度”和“笔划不透明度”应替换为“填充不透明度”和“笔划不透明度”（也就是说，将连字符替换为下划线）。@mermaldad这是不正确的；。在一些不允许名称包含连字符的语言中，用于处理SVG的库使用的名称类似于

fill\u opacity

，但在SVG和CSS中，它是

fill opacity

@WillihamTotland，感谢您的更正。我直接跳到了“如何在Python中使用svgwrite实现此功能”。在这里，您需要用下划线替换连字符。您知道他们最近是否更改了某些内容吗？我有一个使用fill:rgb（…）的chrome应用程序，现在它已完全损坏。我将感谢您的帮助！Qt SVG库（Qt 5.9.3）也无法处理RGBA颜色，无论是“#00000000”十六进制形式还是“RGBA”。对任何感兴趣的人来说，通过空填充接收点击：请参见–即，可以使用

fill=“none”

和

pointer events=“visible”

。例如，

fill=“none”

工作，但

fill=“transparent”

不工作。

fill=”none“

是执行此操作的标准方法，它适用于Inkscape、Firefox、Chrome或任何其他SVG应用程序。请参阅

<path style="fill:rgba(255, 0, 0, .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"/>