---
title: class
slug: Web/SVG/Attribute/class
translation_of: Web/SVG/Attribute/class
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Eigenschaft Referenz</a></p>

<p>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.</p>

<p>Der Klassenname eines Elements hat zwei Schlüsselfunktionen:</p>

<ul>
 <li>Als Stil-Selektor, wenn ein Autor einen Satz von Elementen Stil-Informationen zuweist.</li>
 <li>Als generelle Funktion für den Browser.</li>
</ul>

<p>Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.</p>

<h2 id="Nutzungskontext">Nutzungskontext</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Kategorien</th>
   <td>Keine</td>
  </tr>
  <tr>
   <th scope="row">Wert</th>
   <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;liste-von-klassen-namen&gt;</a></td>
  </tr>
  <tr>
   <th scope="row">Animierbar</th>
   <td>Ja</td>
  </tr>
  <tr>
   <th scope="row">Normatives Dokument</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td>
  </tr>
 </tbody>
</table>

<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p>

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: html">&lt;html&gt;
    &lt;body&gt;
        &lt;svg width="120" height="220"
            viewPort="0 0 120 120" version="1.1"
            xmlns="http://www.w3.org/2000/svg"&gt;

            &lt;style type="text/css" &gt;
                &lt;![CDATA[
                    rect.rectClass {
                        stroke: #000066;
                        fill:   #00cc00;
                    }
                    circle.circleClass {
                        stroke: #006600;
                        fill:   #cc0000;
                    }
                ]]&gt;
            &lt;/style&gt;

            &lt;rect class="rectClass" x="10" y="10" width="100" height="100"/&gt;
            &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
        &lt;/svg&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Elemente">Elemente</h2>

<p>Die folgenden ELemente können das <code>class</code> Attribut verwenden:</p>

<div class="threecolumns">
<ul>
 <li>{{ SVGElement("a") }}</li>
 <li>{{ SVGElement("altGlyph") }}</li>
 <li>{{ SVGElement("circle") }}</li>
 <li>{{ SVGElement("clipPath") }}</li>
 <li>{{ SVGElement("defs") }}</li>
 <li>{{ SVGElement("desc") }}</li>
 <li>{{ SVGElement("ellipse") }}</li>
 <li>{{ SVGElement("feBlend") }}</li>
 <li>{{ SVGElement("feColorMatrix") }}</li>
 <li>{{ SVGElement("feComponentTransfer") }}</li>
 <li>{{ SVGElement("feComposite") }}</li>
 <li>{{ SVGElement("feConvolveMatrix") }}</li>
 <li>{{ SVGElement("feDiffuseLighting") }}</li>
 <li>{{ SVGElement("feDisplacementMap") }}</li>
 <li>{{ SVGElement("feFlood") }}</li>
 <li>{{ SVGElement("feGaussianBlur") }}</li>
 <li>{{ SVGElement("feImage") }}</li>
 <li>{{ SVGElement("feMerge") }}</li>
 <li>{{ SVGElement("feMorphology") }}</li>
 <li>{{ SVGElement("feOffset") }}</li>
 <li>{{ SVGElement("feSpecularLighting") }}</li>
 <li>{{ SVGElement("feTile") }}</li>
 <li>{{ SVGElement("feTurbulence") }}</li>
 <li>{{ SVGElement("filter") }}</li>
 <li>{{ SVGElement("font") }}</li>
 <li>{{ SVGElement("foreignObject") }}</li>
 <li>{{ SVGElement("g") }}</li>
 <li>{{ SVGElement("glyph") }}</li>
 <li>{{ SVGElement("glyphRef") }}</li>
 <li>{{ SVGElement("image") }}</li>
 <li>{{ SVGElement("line") }}</li>
 <li>{{ SVGElement("linearGradient") }}</li>
 <li>{{ SVGElement("marker") }}</li>
 <li>{{ SVGElement("mask") }}</li>
 <li>{{ SVGElement("missing-glyph") }}</li>
 <li>{{ SVGElement("path") }}</li>
 <li>{{ SVGElement("pattern") }}</li>
 <li>{{ SVGElement("polygon") }}</li>
 <li>{{ SVGElement("polyline") }}</li>
 <li>{{ SVGElement("radialGradient") }}</li>
 <li>{{ SVGElement("rect") }}</li>
 <li>{{ SVGElement("stop") }}</li>
 <li>{{ SVGElement("svg") }}</li>
 <li>{{ SVGElement("switch") }}</li>
 <li>{{ SVGElement("symbol") }}</li>
 <li>{{ SVGElement("text") }}</li>
 <li>{{ SVGElement("textPath") }}</li>
 <li>{{ SVGElement("title") }}</li>
 <li>{{ SVGElement("tref") }}</li>
 <li>{{ SVGElement("tspan") }}</li>
 <li>{{ SVGElement("use") }}</li>
</ul>
</div>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Animation support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("5") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>