SVG填充颜色透明度/ alpha?

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

我尝试在fill标签中添加两个值(将其从fill =“#044B94”更改为fill =“#044B9466”),但这不起作用 .

回答(4)

2 years ago

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

例如:

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

此外,您还有以下内容:

中风的

  • stroke-opacity 属性

  • opacity 为整个对象

2 years ago

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

Here's an example .

2 years ago

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的“快速查看”中正确显示 . 但是,谷歌Chrome在版本62之前不支持此语法(先前在版本54中支持启用了实验平台功能标记) .

2 years ago

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

默认值为1,最小值为0,在步骤中使用十进制值EX:0.5 = alpha的50% . 注意:必须定义填充颜色以应用Alpha不透明度 .

my example .

References .