SVG文档中的元素可以使用CSS进行样式设置。 大多数视觉特性和某些元素几何属性由CSS 属性控制。 例如，填充属性控制用于填充形状内部的颜料，而宽度和 高度属性用于控制‘rect’元素的大小。
SVG用户代理必须支持本章中描述的所有CSS样式机制。
在SVG 1.1中，使用‘style’元素和 ‘style’的内联样式表支持并不是必需的。在 SVG 2中，这些是必需的。
| SVG 2 要求： | 将 HTML5 ‘style’ 元素属性添加到 SVG 的 ‘style’ 元素中。 |
|---|---|
| 解决方案： | SVG 2 ‘style’ 元素应与 HTML5 ‘style’ 元素保持一致。 |
| 目的： | 避免在 HTML 和 SVG 内容中对作者产生不同的行为影响。 |
| 负责人： | Cameron (ACTION-3277) |
‘style’ 元素允许 样式表直接嵌入到 SVG 内容中。 SVG 的 ‘style’ 元素具有相同的 属性与 HTML 中的相应元素。
属性定义：
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| type | (见下文) | text/css | 否 |
该属性指定元素内容的样式表语言，作为一个 媒体类型。 [rfc2046]. 如果未指定该属性，则假定样式表语言为CSS。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| media | (见下文) | all | 否 |
该属性指定必须匹配的媒体查询，以便样式表应用。其值被解析为一个 media_query_list。 如果未指定，则样式表无条件应用。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| title | (见下文) | (无) | 否 |
该属性指定样式表的标题，用于在曝光和选择备用样式表时使用。该属性可以取任何值。
‘style’ 元素及其属性的语义和处理必须与 HTML ‘style’ 元素 中定义的相同。
样式表的文本内容不会直接渲染； display 值必须始终设置为 none，由 用户代理样式表， 此声明必须优先于任何其他CSS规则或呈现属性。
在SVG文档中的HTML ‘link’ 元素（即，HTML命名空间中本地名称为“link”的元素） 其‘rel’属性设置为'stylesheet'， 必须按HTML规范定义进行处理，并导致外部样式表加载并应用于文档。此类元素在非内联SVG片段的HTML文档中也必须应用于SVG内容。
由于该元素要求位于HTML命名空间，因此不可能在text/html文档中的内联SVG片段中解析HTML ‘link’ 元素。但是，当使用XML语法解析SVG文档时，可以使用XML命名空间声明将该元素放置在HTML命名空间中。
请注意，引用外部样式表的另一种方法是不使用HTML ‘link’ 元素，而是使用内联样式表中的@import规则。例如：
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@import url(mystyles.css);
</style>
<rect .../>
</svg>
其行为类似于：
<svg xmlns="http://www.w3.org/2000/svg"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"> <rect .../> </svg>
或者，在XML文档中，可以使用<?xml-stylesheet?> 处理指令包含外部CSS样式表 [xml-stylesheet]。
当在HTML文档中使用SVG ‘style’ 或HTML ‘style’元素时，这些样式表必须适用于文档中的所有HTML和内联SVG内容。类似地，在SVG文档中使用的任何HTML ‘style’元素也必须将其样式表应用于文档。
与HTML一样，SVG在所有元素上支持‘class’和‘style’属性，以支持元素特定样式。
属性定义：
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| class | 一组 空格分隔的标记 [HTML] | (无) | 是 |
‘class’属性 将一个或多个类名分配给元素，然后可以通过样式语言进行引用。
| 名称 | 值 | 初始值 | 可动画 |
|---|---|---|---|
| style | (见下文) | (无) | 否 |
除了‘class’属性在SVG DOM中（在className IDL属性上）反映的方式外，‘class’ 和‘style’属性的语义和 行为必须与HTML中的相应属性相同。
在以下示例中，‘text’元素与‘class’属性一起使用，以标记文档消息。消息以英语和法语版本显示。
<!-- 英语消息 --> <text class="info" lang="en">变量声明了两次</text> <text class="warning" lang="en">未声明的变量</text> <text class="error" lang="en">变量名称的语法错误</text> <!-- 法语消息 --> <text class="info" lang="fr">变量声明了两次</text> <text class="warning" lang="fr">未定义的变量</text> <text class="error" lang="fr">变量的语法错误</text>
以下CSS样式规则将告诉视觉用户代理将信息消息显示为绿色，将警告消息显示为黄色，将错误消息显示为红色：
text.info { fill: green; }
text.warning { fill: yellow; }
text.error { fill: red; }
此示例显示如何使用‘style’属性来样式化‘text’元素，类似于前面的示例：
<text style="fill: green;" lang="en">变量声明了两次</text> <text style="fill: yellow;" lang="en">未声明的变量</text> <text style="fill: red;" lang="en">变量名称的语法错误</text>
某些样式属性不仅可以在样式表和 ‘style’ 属性中指定，还可以在 表现属性中指定。 这些属性的名称与给定的 CSS 属性匹配（或类似），并且其值被解析为该属性的值。表现属性对 作者级别 的级联有所贡献，遵循所有其他作者级样式表，并具有特异性 0。
由于表现属性被解析为 CSS 值，而不是声明，因此在表现属性中的 !important 声明将导致其具有 无效值。 有关表现属性如何解析的详细信息，请参见 属性语法。
并非所有可以影响 SVG 渲染的样式属性都有相应的表现属性。 其他属性（恰好与样式属性同名）不得被解析为表现属性，并且不得影响 CSS 的级联和继承。 此外，只有在 SVG 命名空间中的元素支持表现属性。 大多数 SVG 表现属性可以在 SVG 命名空间中的任何元素上指定，只要与现有属性没有名称冲突。 然而，几何属性仅在指定元素上有等效的表现属性。 其他元素上的同名属性不得影响 CSS 的级联和继承。
除了在 transform 表现属性的表中说明的内容外， 表现属性名称与属性名称相同，均为小写字母。
由于呈现属性仅适用于 SVG 命名空间中的元素，因此 HTML video 元素被分类为 图形元素，例如，但不支持任何呈现属性。
请注意 ‘cx’， ‘cy’， ‘r’， ‘x’， ‘y’， ‘width’ 和 ‘height’ 属性并不总是呈现属性。 例如，‘x’ 属性在 ‘text’ 和 ‘tspan’ 上不是 x 属性的呈现属性， 而 ‘r’ 属性在 ‘radialGradient’ 上不是 r 属性的呈现属性。
将来，任何适用于 SVG 内容的新属性将不会获得呈现属性。因此，建议作者使用样式属性，通过内联 ‘style’ 属性或样式表，而不是呈现属性，来为 SVG 内容设置样式。
呈现属性的动画相当于动画相应的属性。
以下属性必须被所有 SVG 用户代理支持：
以下 用户代理样式表 必须在所有 SVG 用户代理中应用。
@namespace url(http://www.w3.org/2000/svg);
@namespace xml url(http://www.w3.org/XML/1998/namespace);
svg:not(:root), image, marker, pattern, symbol { overflow: hidden; }
*:not(svg),
*:not(foreignObject) > svg {
transform-origin: 0 0;
}
*[xml|space=preserve] {
text-space-collapse: preserve-spaces;
}
defs,
clipPath, mask, marker,
desc, title, metadata,
pattern, linearGradient, radialGradient,
script, style,
symbol {
display: none !important;
}
:host(use) > symbol {
display: inline !important;
}
:link, :visited {
cursor: pointer;
}
此外，所有互动用户代理都需要
对 :focus 伪类应用独特样式
（通常使用 outline 属性）
和 ::selection 伪元素
（使用适当的高亮技术，
例如用反色重绘所选字符）。
用户代理样式表中的 !important 规则
覆盖所有用户和作者样式
[css-cascade-4]。
未渲染元素和
‘symbol’ 元素的显示值
因此不能被更改。
只有当符号是其宿主为
‘use’ 元素的
直接子元素时，才会渲染符号
（并且如果宿主 ‘use’ 元素被渲染，则必须始终渲染）。
其他元素及其子内容则永远不会被直接渲染。
CSS 变换定义了 transform-origin 的初始值为 50% 50%。 由于 SVG 中的元素必须默认围绕其原点 (0, 0) 进行变换， transform-origin 被覆盖并为所有 SVG 元素设置了默认值 0 0 （根 ‘svg’ 元素 和作为 ‘svg’ 元素的子元素的 ‘foreignObject’ 元素必须围绕其中心进行变换）。 [css-transforms-1]
OpenType 规范 要求在处理时应用额外的用户代理样式表 [OPENTYPE]。 它如下：
@namespace svg url(http://www.w3.org/2000/svg);
svg|text, svg|foreignObject {
display: none !important;
}
:root {
fill: context-fill;
fill-opacity: context-fill-opacity;
stroke: context-stroke;
stroke-opacity: context-stroke-opacity;
stroke-width: context-value;
stroke-dasharray: context-value;
stroke-dashoffset: context-value;
}
context-fill 和 context-stroke 关键字 如本规范中所定义， 其中字体字形的 上下文元素 是相应的 文本内容元素。 其他关键字如 OpenType 规范中所定义， 确保文本内容元素中的样式值 传播到字体字形， 适当调整坐标系的变化 [OPENTYPE]。
除了上述描述的特性外，以下 CSS 特性也必须在 SVG 用户代理中得到支持：
一个 SVGStyleElement 对象表示 ‘style’ 元素 在 DOM 中。
[Exposed=Window]
interface SVGStyleElement : SVGElement {
attribute DOMString type;
attribute DOMString media;
attribute DOMString title;
};
SVGStyleElement 包含 LinkStyle;
该 type、 media 和 title IDL 属性 反映 ‘type’、‘media’ 和 ‘title’ 内容属性，分别。