是否可以在SVG填充颜色上设置透明度或alpha级别?
我尝试向填充标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466"),但这不起作用。
是否可以在SVG填充颜色上设置透明度或alpha级别?
我尝试向填充标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466"),但这不起作用。
当前回答
我分享一个相关的技巧,当你想让SVG继承容器的样式,如正常状态,悬停状态和访问状态时,你可能会遇到: 在路径上使用fill='currentColor'。这就是SVG是如何产生的字体awesome图标可以采取任何前色应用到字体!
其他回答
我分享一个相关的技巧,当你想让SVG继承容器的样式,如正常状态,悬停状态和访问状态时,你可能会遇到: 在路径上使用fill='currentColor'。这就是SVG是如何产生的字体awesome图标可以采取任何前色应用到字体!
要使填充完全透明,fill="transparent"在现代浏览器中似乎是有效的。但它在微软Word (Mac版)中不起作用,我不得不使用fill-opacity="0"。
更新
根据下面Alex Henrie的评论,fill="none"可能是更好的选择。
fill="#044B9466"
这是SVG中十六进制符号的RGBA颜色,用十六进制值定义。这是有效的,但不是所有程序都能正确显示它…
您可以在这里找到对该语法的浏览器支持:https://caniuse.com/#feat=css-rrggbbaa
截至2017年8月:RGBA填充颜色将在Mozilla Firefox (54), Apple Safari(10.1)和Mac OS X Finder的“快速视图”上正常显示。然而,谷歌Chrome直到62版才支持此语法(之前由54版支持,实验平台功能标志启用)。
截至2021年4月,Inkscape版本1.0.2无法在SVG文件中读取这种格式,而是将任何RGBA颜色转换为不透明的黑色。错误报告在这里:https://gitlab.com/inkscape/inbox/-/issues/1195
在SVG元素中使用fill-opacity属性。
默认值为1,最小值为0,在步进中使用十进制值EX: 0.5 = alpha的50%。注意:有必要定义填充颜色来应用填充不透明度。
请看我的例子。
参考文献
你使用一个额外的属性;fill-opacity:该属性接受一个介于0.0到1.0之间的十进制数;其中0.0是完全透明的。
例如:
<rect ... fill="#044B94" fill-opacity="0.4"/>
此外,你有以下:
描边的描边不透明度属性 整个对象的不透明度