Weist einen Klassennamen oder eine Reihe von Klassennamen einem Element zu. Sie können den Klassennamen mehrfach einem Element zuweisen, oder auch zu mehreren Elementen zuweisen. Jedoch müssen Klassennamen mit einem Leerzeichen getrennt sein.
Der Klassenname eines Elements hat zwei Schlüsselfunktionen:
- Als Stil-Selektor, wenn ein Autor einen Satz von Elementen Stil-Informationen zuweist.
- Als generelle Funktion für den Browser.
Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.
Nutzungskontext
| Kategorien | Keine |
|---|---|
| Wert | <liste-von-klassen-namen> |
| Animierbar | Ja |
| Normatives Dokument | 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-TsWithin 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
SVGLengthListorSVGAnimatedLengthListobject.
Beispiel
<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>
Elemente
Die folgenden ELemente können das class Attribut verwenden:
<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-Kompatibilität
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Ja) | (Ja) | ? | ? | ? |
| Animation support | ? | 5 (5) | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |