class

  • Revision slug: SVG/Attribute/class
  • Revision title: class
  • Revision id: 57634
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

« SVG Attribute reference home

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements. If you specify multiple class names, they must be separated by whitespace characters.

The class name of an element has two key roles:

  • As a style sheet selector, for use when an author wants to assign style information to a set of elements.
  • For general usage by the browser.

The class can be used to style SVG content using CSS.

Usage context

Categories None
Value <list-of-class-names>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The class attribute

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

Example

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

Elements

The following elements can use the class attribute:

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Animation support {{ CompatUnknown() }} {{ CompatGeckoDesktop("5") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements. If you specify multiple class names, they must be separated by whitespace characters.</p>
<p>The class name of an element has two key roles:</p>
<ul> <li>As a style sheet selector, for use when an author wants to assign style information to a set of elements.</li> <li>For general usage by the browser.</li>
</ul>
<p>The class can be used to style SVG content using CSS.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>None</td> </tr> <tr> <th scope="row">Value</th> <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;list-of-class-names&gt;</a></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</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="Example">Example</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="Elements">Elements</h2>
<p>The following elements can use the <code>class</code> attribute:</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_compatibility">Browser compatibility</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>{{ CompatUnknown() }}</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>
Revert to this revision