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-Attribut-Referenz Übersicht

Weist einem Element einen Klassennamen oder eine Menge von Klassennamen zu. Sie können einem beliebigen Element dieselben Klassennamen zuweisen. Mehrere Klassennamen müssen jedoch durch Leerzeichen getrennt werden.

Der Klassenname eines Elements erfüllt zwei Hauptfunktionen:

  • Als Selektor für Stylesheets, wenn ein Autor Stilinformationen auf eine Gruppe von Elementen anwendet.
  • Für die allgemeine Verwendung durch den Browser.

Sie können diese Klasse verwenden, um SVG-Inhalte mit CSS zu stylen.

Nutzungskontext

Kategorien Keine
Wert <list-of-class-names>
Animierbar Ja
Normatives Dokument SVG 1.1 (2. Ausgabe): Das class-Attribut

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:

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# ElementSpecificStyling

Browser-Kompatibilität

BCD tables only load in the browser