mozilla

Revision 57627 of class

  • Revision slug: SVG/Attribute/class
  • Revision title: class
  • Revision id: 57627
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

« SVG Attribute reference home

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements. If you specify multiple class names, they must be separated by whitespace characters.

The class name of an element has two key roles:

  • As a style sheet selector, for use when an author wants to assign style information to a set of elements.
  • For general usage by the browser.

The class can be used to style SVG content using CSS.

Usage context

Categories None
Value <list-of-class-names>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The class attribute

{{ page("/en/SVG/Content_type","List-of-Ts") }}

Example

Elements

The following elements can use the class attribute:

  • {{ SVGElement("a") }}
  • {{ SVGElement("altGlyph") }}
  • {{ SVGElement("circle") }}
  • {{ SVGElement("clipPath") }}
  • {{ SVGElement("defs") }}
  • {{ SVGElement("desc") }}
  • {{ SVGElement("ellipse") }}
  • {{ SVGElement("feBlend") }}
  • {{ SVGElement("feColorMatrix") }}
  • {{ SVGElement("feComponentTransfer") }}
  • {{ SVGElement("feComposite") }}
  • {{ SVGElement("feConvolveMatrix") }}
  • {{ SVGElement("feDiffuseLighting") }}
  • {{ SVGElement("feDisplacementMap") }}
  • {{ SVGElement("feFlood") }}
  • {{ SVGElement("feGaussianBlur") }}
  • {{ SVGElement("feImage") }}
  • {{ SVGElement("feMerge") }}
  • {{ SVGElement("feMorphology") }}
  • {{ SVGElement("feOffset") }}
  • {{ SVGElement("feSpecularLighting") }}
  • {{ SVGElement("feTile") }}
  • {{ SVGElement("feTurbulence") }}
  • {{ SVGElement("filter") }}
  • {{ SVGElement("font") }}
  • {{ SVGElement("foreignObject") }}
  • {{ SVGElement("g") }}
  • {{ SVGElement("glyph") }}
  • {{ SVGElement("glyphRef") }}
  • {{ SVGElement("image") }}
  • {{ SVGElement("line") }}
  • {{ SVGElement("linearGradient") }}
  • {{ SVGElement("marker") }}
  • {{ SVGElement("mask") }}
  • {{ SVGElement("missing-glyph") }}
  • {{ SVGElement("path") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("polygon") }}
  • {{ SVGElement("polyline") }}
  • {{ SVGElement("radialGradient") }}
  • {{ SVGElement("rect") }}
  • {{ SVGElement("stop") }}
  • {{ SVGElement("svg") }}
  • {{ SVGElement("switch") }}
  • {{ SVGElement("symbol") }}
  • {{ SVGElement("text") }}
  • {{ SVGElement("textPath") }}
  • {{ SVGElement("title") }}
  • {{ SVGElement("tref") }}
  • {{ SVGElement("tspan") }}
  • {{ SVGElement("use") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements. If you specify multiple class names, they must be separated by whitespace characters.</p>
<p>The class name of an element has two key roles:</p>
<ul> <li>As a style sheet selector, for use when an author wants to assign style information to a set of elements.</li> <li>For general usage by the browser.</li>
</ul>
<p>The class can be used to style SVG content using CSS.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>None</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;list-of-class-names&gt;</a></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/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td> </tr> </tbody>
</table>
<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>class</code> attribute:</p>
<ul> <li>{{ SVGElement("a") }}</li> <li>{{ SVGElement("altGlyph") }}</li> <li>{{ SVGElement("circle") }}</li> <li>{{ SVGElement("clipPath") }}</li> <li>{{ SVGElement("defs") }}</li> <li>{{ SVGElement("desc") }}</li> <li>{{ SVGElement("ellipse") }}</li> <li>{{ SVGElement("feBlend") }}</li> <li>{{ SVGElement("feColorMatrix") }}</li> <li>{{ SVGElement("feComponentTransfer") }}</li> <li>{{ SVGElement("feComposite") }}</li> <li>{{ SVGElement("feConvolveMatrix") }}</li> <li>{{ SVGElement("feDiffuseLighting") }}</li> <li>{{ SVGElement("feDisplacementMap") }}</li> <li>{{ SVGElement("feFlood") }}</li> <li>{{ SVGElement("feGaussianBlur") }}</li> <li>{{ SVGElement("feImage") }}</li> <li>{{ SVGElement("feMerge") }}</li> <li>{{ SVGElement("feMorphology") }}</li> <li>{{ SVGElement("feOffset") }}</li> <li>{{ SVGElement("feSpecularLighting") }}</li> <li>{{ SVGElement("feTile") }}</li> <li>{{ SVGElement("feTurbulence") }}</li> <li>{{ SVGElement("filter") }}</li> <li>{{ SVGElement("font") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("g") }}</li> <li>{{ SVGElement("glyph") }}</li> <li>{{ SVGElement("glyphRef") }}</li> <li>{{ SVGElement("image") }}</li> <li>{{ SVGElement("line") }}</li> <li>{{ SVGElement("linearGradient") }}</li> <li>{{ SVGElement("marker") }}</li> <li>{{ SVGElement("mask") }}</li> <li>{{ SVGElement("missing-glyph") }}</li> <li>{{ SVGElement("path") }}</li> <li>{{ SVGElement("pattern") }}</li> <li>{{ SVGElement("polygon") }}</li> <li>{{ SVGElement("polyline") }}</li> <li>{{ SVGElement("radialGradient") }}</li> <li>{{ SVGElement("rect") }}</li> <li>{{ SVGElement("stop") }}</li> <li>{{ SVGElement("svg") }}</li> <li>{{ SVGElement("switch") }}</li> <li>{{ SVGElement("symbol") }}</li> <li>{{ SVGElement("text") }}</li> <li>{{ SVGElement("textPath") }}</li> <li>{{ SVGElement("title") }}</li> <li>{{ SVGElement("tref") }}</li> <li>{{ SVGElement("tspan") }}</li> <li>{{ SVGElement("use") }}</li>
</ul>
Revert to this revision