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 mehrere Klassennamen zu. Sie können denselben Klassennamen oder dieselben Klassennamen beliebig vielen Elementen zuweisen. Mehrere Klassennamen müssen jedoch durch Whitespace-Zeichen getrennt sein.
Der Klassenname eines Elements erfüllt zwei wesentliche Funktionen:
- Er dient als Stylesheet-Selektor, wenn einem Satz von Elementen Stilinformationen zugewiesen werden.
- Er kann vom Browser für allgemeine Zwecke verwendet werden.
Mit diesem Attribut können Sie SVG-Inhalte mithilfe von CSS gestalten.
Elemente
Die folgenden Elemente können das Attribut class 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>
Beispiel
html
<html lang="en">
<body>
<svg
width="120"
height="220"
viewPort="0 0 120 120"
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>
Verwendungshinweise
| Kategorien | Keine |
|---|---|
| Wert | <list-of-class-names> |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling |