We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

« Домашняя страница справочника по SVG аттрибутам

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

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

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

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

Контекст использования

Категория None
Значение <list-of-class-names>
Возможна анимация Yes
Нормативный документ SVG 1.1 (2nd Edition): The class attribute



(Where T is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).

The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:

list-of-Ts ::= T
               | T, list-of-Ts

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.


        <svg width="120" height="220"  
            viewPort="0 0 120 120" version="1.1" 

            <style type="text/css" >
                    rect.rectClass {
                        stroke: #000066;
                        fill:   #00cc00;
                    circle.circleClass {
                        stroke: #006600;
                        fill:   #cc0000;

            <rect class="rectClass" x="10" y="10" width="100" height="100"/>
            <circle  class="circleClass"   cx="40" cy="50" r="26"/>


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


Совместимость с броузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) ? ? ?
Animation support ? 5 (5) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?


Метки документа и участники

 Внесли вклад в эту страницу: dmitron1036
 Обновлялась последний раз: dmitron1036,