« Домашняя страница справочника по SVG аттрибутам
Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".
Класс элемента имеет 2 ключевые роли:
- Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.
- Для общих целей Броузера.
Класс может быть использован для стилизации SVG содержимого используя CSS.
Контекст использования
Категория | None |
---|---|
Значение | <list-of-class-names> |
Возможна анимация | Yes |
Нормативный документ | SVG 1.1 (2nd Edition): The class attribute |
List-of-Ts
- <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
orSVGAnimatedLengthList
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>
<altGlyph>
<circle>
<clipPath>
<defs>
<desc>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
<filter>
<font>
<foreignObject>
<g>
<glyph>
<glyphRef>
<image>
<line>
<linearGradient>
<marker>
<mask>
<missing-glyph>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<stop>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tref>
<tspan>
<use>
Совместимость с броузерами
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 | ? | ? | ? | ? | ? |