class
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Weist einem Element einen Klassennamen oder eine Menge von Klassennamen zu. Sie können denselben Klassennamen oder -namen einer beliebigen Anzahl von Elementen zuweisen, jedoch müssen mehrere Klassennamen durch Leerzeichen getrennt sein.
Der Klassenname eines Elements hat zwei Hauptfunktionen:
- Als Selektor in Stylesheets, wenn ein Autor einer Gruppe von Elementen Stilinformationen zuweist.
- Zur allgemeinen Verwendung durch den Browser.
Sie können diese Klasse verwenden, um SVG-Inhalte mit CSS zu stylen.
Verwendungskontext
| Kategorien | Keine |
|---|---|
| Wert | <list-of-class-names> |
| Animierbar | Ja |
Beispiel
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>
Elemente
Die folgenden Elemente können das class-Attribut verwenden:
<a><circle><clipPath><defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><foreignObject><g><image><line><linearGradient><marker><mask><path><pattern><polygon><polyline><radialGradient><rect><stop><svg><switch><symbol><text><textPath><title><tspan><use>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling |