fill-opacity
fill-opacity 属性是一个表示属性，用于定义应用于形状的画笔服务器（颜色、渐变、图案等）的不透明度。
注意：作为一个表示属性，fill-opacity 也有一个对应的 CSS 属性：fill-opacity。当两者都指定时，CSS 属性具有优先权。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- Default fill opacity: 1 -->
<circle cx="50" cy="50" r="40" />
<!-- Fill opacity as a number -->
<circle cx="150" cy="50" r="40" fill-opacity="0.7" />
<!-- Fill opacity as a percentage -->
<circle cx="250" cy="50" r="40" fill-opacity="50%" />
<!-- Fill opacity as a CSS property -->
<circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
用法说明
| 值 |
[0-1] | <percentage> |
|---|---|
| 默认值 | 1 |
| 可动画的 | 是 |
注意：SVG2 为 fill-opacity 引入了百分比值，但目前支持度不高（参见下面的浏览器兼容性）。因此，最佳实践是设置不透明度时使用 [0-1] 范围内的值。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # FillOpacity |
浏览器兼容性
加载中…