---
title: class
slug: Web/SVG/Attribute/class
tags:
  - Atributos SVG
  - Classe
  - Referencia
  - SVG
translation_of: Web/SVG/Attribute/class
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial da referência de atributos do SVG</a></p>

<p>Atribui um nome de classe ou um conjunto de nomes de classe a um elemento. Você pode atribuir o mesmo nome ou nomes de classe para qualquer número de elementos. Se você especificar vários nomes de classe, estes devem ser separados por caracteres de espaço em branco.</p>

<p>O nome de classe de um elemento tem duas funções principais:</p>

<ul>
 <li>Como um seletor de folha de estilo, para a utilização quando um autor quiser atribuir informações de estilo a um conjunto de elementos.</li>
 <li>Para utilizações gerais do navegador.</li>
</ul>

<p>A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.</p>

<h2 id="Utilização">Utilização</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categorias</th>
   <td>Nenhuma</td>
  </tr>
  <tr>
   <th scope="row">Valor</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">Animável</th>
   <td>Sim</td>
  </tr>
  <tr>
   <th scope="row">Documento normativo</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2ª Edição): O atributo class</a></td>
  </tr>
 </tbody>
</table>

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

<h2 id="Exemplo">Exemplo</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="Elementos">Elementos</h2>

<p>Os seguintes elementos podem utilizar o atributo <code>class</code>:</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">Compatibilidade com navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>(yes)</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Suporte à animação</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>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>