Question

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

我尝试在fill标记中添加两个值（将其从fill =“＃044B94”更改为fill =“＃044B9466”），但这不起作用。

Answer 1

您使用addtional属性; fill-opacity：此属性采用介于0.0和1.0之间的十进制数;其中0.0是完全透明的。

例如：

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

此外，您还有以下内容：

stroke-opacity属性
opacity表示整个对象

Answer 2

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

Here's an example

Answer 3

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＆＃34; Quick View＆＃34;上正确显示。但是，谷歌Chrome在版本62之前不支持此语法（以前版本54支持启用实验平台功能标记）。

Answer 4

要更改 svg 代码的透明度，最简单的方法是在任何文本编辑器上打开它并查找样式属性。样式的显示方式取决于 svg 创建者。由于我是 Inkscape 用户，因此它设置样式值的常用方法是通过样式标签，就像它是 html 一样，但使用 svg 本机属性，如 fill、stroke、stroke-width、{ {1}} 等。 opacity 影响整个 svg 对象，或者其声明的路径或组，而 opacity, fill-opacity 将仅影响填充和笔触透明度。也就是说，我也使用过并尝试过只使用 stroke-opacity 而不是使用 fill 而是使用像这样的 rgba 标准 #fff 就像在 css 中一样。这适用于必须的现代浏览器。

请记住，如果您打算进一步重新编辑您的 svg，根据我的经验，最佳做法是始终保留一个未修改的版本。 Inkscape 在手动更改 svg 时更加灵活，但 Illustrator 和 CorelDraw 在导入和编辑 svg 时可能会出现问题。

示例

rgba(255, 255, 255, 1)

示例 2

<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"/>

示例 3

<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"/>

请注意，在最后一个示例中，<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 通道。

Answer 5

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

默认值为1，最小值为0，步骤使用十进制值EX：0.5 = alpha的50％。注意：有必要定义fill颜色以应用fill-opacity。

请参阅my example。

References

Answer 6

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

SVG填充颜色透明度/ alpha？

6 个答案: