fill-opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
该属性指定了填色的不透明度或当前对象的内容物的不透明度。
使用说明
| 类别 | 外观属性 |
|---|---|
| 值 | <opacity-value> | inherit |
| 初始值 | 1 |
| 可变性 | Yes |
示例
html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- 默认填充不透明度：1 -->
<circle cx="50" cy="50" r="40" />
<!-- 以数字指定填充不透明度 -->
<circle cx="150" cy="50" r="40" fill-opacity="0.7" />
<!-- 以百分比值指定填充不透明度 -->
<circle cx="250" cy="50" r="40" fill-opacity="50%" />
<!-- 以 CSS 属性指定填充不透明度 -->
<circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
规范
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # FillOpacity |