opacity

  • Revision slug: SVG/Attribute/opacity
  • Revision title: opacity
  • Revision id: 33609
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 20 words added, 20 words removed

Revision Content

« SVG Attribute reference home

The 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, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("opacity","CSS opacity") }} for further information.

Usage context

Categories Presentation attribute
Value <opacity-value> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<opacity-value>
The uniform opacity setting to be applied across an entire object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

Example

Elements

The following elements can use the opacity attribute

  • Graphics elements »
  • {{ SVGElement("a") }}
  • {{ SVGElement("defs") }}
  • {{ SVGElement("glyph") }}
  • {{ SVGElement("g") }}
  • {{ SVGElement("marker") }}
  • {{ SVGElement("missing-glyph") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("svg") }}
  • {{ SVGElement("switch") }}
  • {{ SVGElement("symbol") }}

See also

  • {{ cssxref("opacity","CSS opacity") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>opacity</code> 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.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("opacity","CSS opacity") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td>&lt;opacity-value&gt; | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty" title="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>&lt;opacity-value&gt;</dt> <dd>The uniform opacity setting to be applied across an entire object, as a <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>opacity</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li> <li>{{ SVGElement("a") }}</li> <li>{{ SVGElement("defs") }}</li> <li>{{ SVGElement("glyph") }}</li> <li>{{ SVGElement("g") }}</li> <li>{{ SVGElement("marker") }}</li> <li>{{ SVGElement("missing-glyph") }}</li> <li>{{ SVGElement("pattern") }}</li> <li>{{ SVGElement("svg") }}</li> <li>{{ SVGElement("switch") }}</li> <li>{{ SVGElement("symbol") }}</li>
</ul><h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("opacity","CSS opacity") }}</li>
</ul>
Revert to this revision