SVG填充颜色透明度/ alpha？

4 回答

• 70

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

  例如：

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

  此外，您还有以下内容：

  中风的

  • stroke-opacity 属性

  • opacity 为整个对象

  回复于 2024-04-26T09:29:48+08:00
• 537

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

  Here's an example .

  回复于 2024-04-26T09:29:48+08:00
• 0

  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中支持启用了实验平台功能标记） .

  回复于 2024-04-26T09:29:48+08:00
• 4

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

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

  见my example .

  References .

  回复于 2024-04-26T09:29:48+08:00