class
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
« 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 |
Example
html
<html lang="en">
<body>
<svg
width="120"
height="220"
viewPort="0 0 120 120"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<style>
<![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>
<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>
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling |
Browser compatibility
BCD tables only load in the browser