diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/svg/attribute/class/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/svg/attribute/class/index.html')
-rw-r--r-- | files/ru/web/svg/attribute/class/index.html | 190 |
1 files changed, 190 insertions, 0 deletions
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"><list-of-class-names></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"><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></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> |