class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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:

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# ElementSpecificStyling

Browser-Kompatibilität