« 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, however, multiple class names must be separated by whitespace characters.
An element's class name serves two key roles:
- As a style sheet selector, for when an author assigns style information to a set of elements.
- For general use by the browser.
You can use this class 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 |
List-of-Ts
- <list-of-Ts>
-
(Where T is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.
White space in lists is defined as one or more of the following consecutive characters: "space" (
U+0020
), "tab" (U+0009
), "line feed" (U+000A
), "carriage return" (U+000D
), and "form-feed" (U+000C
).The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:
list-of-Ts ::= T | T, list-of-Ts
Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an
SVGLengthList
orSVGAnimatedLengthList
object.
Example
<html> <body> <svg width="120" height="220" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css" > <![CDATA[ rect.rectClass { stroke: #000066; fill: #00cc00; } circle.circleClass { stroke: #006600; fill: #cc0000; } ]]> </style> <rect class="rectClass" x="10" y="10" width="100" height="100"/> <circle class="circleClass" cx="40" cy="50" r="26"/> </svg> </body> </html>
Elements
The following elements can use the class
attribute:
<a>
<altGlyph>
<circle>
<clipPath>
<defs>
<desc>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
<filter>
<font>
<foreignObject>
<g>
<glyph>
<glyphRef>
<image>
<line>
<linearGradient>
<marker>
<mask>
<missing-glyph>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<stop>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tref>
<tspan>
<use>
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
class | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Animation support | Chrome ? | Edge ? | Firefox Full support 5 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android Full support 5 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown