class

« SVG Eigenschaft Referenz

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-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 or SVGAnimatedLengthList object.

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:

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

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 ? ? ? ? ?