---
title: class
slug: Web/SVG/Attribute/class
translation_of: Web/SVG/Attribute/class
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG атрибутам</a></p>

<p>Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p>

<p>Класс элемента имеет 2 ключевые роли:</p>

<ul>
 <li>Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.</li>
 <li>Для общих целей Броузера.</li>
</ul>

<p>Класс может быть использован для стилизации SVG содержимого используя CSS.</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категория</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">Значение</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">Возможна анимация</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Нормативный документ</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="Элементы">Элементы</h2>

<p>В следующих элементах допустимо использовать атрибут <code>class</code></p>

<p>:{{ SVGElement("a") }}</p>

<div class="threecolumns">
<ul>
 <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="Совместимость_с_броузерами">Совместимость с броузерами</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>