From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/ru/web/svg/attribute/class/index.html | 190 ++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 files/ru/web/svg/attribute/class/index.html

(limited to 'files/ru/web/svg/attribute/class/index.html')

diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.html
new file mode 100644
index 0000000000..622423f521
--- /dev/null
+++ b/files/ru/web/svg/attribute/class/index.html
@@ -0,0 +1,190 @@
+---
+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>
-- 
cgit v1.2.3-54-g00ecf