opacity

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

注意： As a presentation attribute, opacity can be used as a CSS property. See the css opacity property for more information.

You can use this attribute with the following SVG elements:

范例

html, body, svg {
  height: 100%;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

用法注意事项

默认值	`1`
值	`<alpha-value>`
Animatable	Yes

<alpha-value>

规范

规范	状态	注释
CSS Color Module Level 4 The definition of 'opacity' in that specification.	工作草案	Defines in more detail what this attribute applies to.
CSS Color Module Level 3 The definition of 'opacity' in that specification.	推荐	Defines in more detail what this attribute applies to.
Scalable Vector Graphics (SVG) 2 The definition of 'opacity' in that specification.	候选推荐	References the specification in CSS Color 3 and notes that there are some related attributes.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'opacity' in that specification.	推荐	初始定义