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