class

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

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

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

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

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

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

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

List-of-`T`s

<list-of-Ts>

(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.

Example

<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>

Элементы

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

:<a>

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

BCD tables only load in the browser