内容类型

SVG 使用多种数据类型。本文列出了这些类型以及它们的语法和用途描述。

角度

<angle>

角度以两种方式之一指定。在样式表中属性值的上下文中,<angle> 定义如下

angle ::= number (~"deg" | ~"grad" | ~"rad")?

其中 deg 表示度,grad 表示梯度,rad 表示弧度。

对于 CSS2 中定义的属性,必须提供角度单位标识符。对于 SVG 特定属性及其相应的表示属性中的角度值,角度单位标识符是可选的。如果未提供,则假定角度值为度。在所有属性(无论是在 SVG1.1 中定义还是在 CSS2 中定义)的表示属性中,如果指定了角度标识符,则必须为小写。

当角度用于 SVG 属性时,<angle> 则定义如下

angle ::= number ("deg" | "grad" | "rad")?

此类 <angle> 值中的单位标识符必须为小写。

在 SVG DOM 中,<angle> 值使用 SVGAngleSVGAnimatedAngle 对象表示。

任何东西

<anything>

基本类型 <anything> 是零个或多个字符的序列。具体来说

anything ::= Char*

其中 Char 是字符的生成,如 XML 1.0 第 2.2 节中所定义。

时钟值

<clock-value>

时钟值与 SMIL 动画 规范中的时钟值语法相同。此处重复时钟值的语法

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

对于 Timecount 值,默认度量后缀为“s”(秒)。时钟值中不允许嵌入空格,尽管会忽略前导和尾随空格字符。

以下是合法时钟值的示例

  • 完整时钟值
    • 02:30:03 = 2 小时 30 分钟 3 秒
    • 50:00:10.25 = 50 小时 10 秒 250 毫秒
  • 部分时钟值
    • 02:33 = 2 分钟 33 秒
    • 00:10.5 = 10.5 秒 = 10 秒 500 毫秒
  • Timecount 值
    • 3.2h = 3.2 小时 = 3 小时 12 分钟
    • 45min = 45 分钟
    • 30s = 30 秒
    • 5ms = 5 毫秒
    • 12.467 = 12 秒 467 毫秒
  • 分数值只是秒的(以 10 为底的)浮点定义。因此
    • 00.5s = 500 毫秒
    • 00:00.005 = 5 毫秒

颜色

<color>

基本类型 <color> 是 sRGB 色彩空间中颜色的 CSS2 兼容规范。<color> 应用于 SVG 对 color 属性的使用,并且是属性 fillstrokestop-colorflood-colorlighting-color 定义的组成部分,这些属性还提供可选的基于 ICC 的颜色规范。

SVG 支持 CSS2 语法和基本数据类型 中定义的所有 <color> 语法替代方案,以及(取决于实现)将来 CSS 颜色模块级别 3 中的语法替代方案。

<color> 既可以是关键字,也可以是数字 RGB 规范。

除了这些颜色关键字之外,用户还可以指定与用户环境中对象使用的颜色相对应的关键字。这些关键字的规范性定义可以在 颜色用户首选项(CSS2,第 18.2 节)中找到。

十六进制表示法中 RGB 值的格式是“#”后跟三个或六个十六进制字符。三位 RGB 表示法(#rgb)通过复制数字转换为六位格式(#rrggbb),而不是添加零。例如,#fb0 扩展为 #ffbb00。这确保可以使用简写表示法(#fff)指定白色(#ffffff),并消除对显示器颜色深度的任何依赖性。函数表示法中 RGB 值的格式是 RGB 开始函数,后跟三个数值(三个整数值或三个百分比值)的逗号分隔列表,后跟“)”。RGB 开始函数是不区分大小写的字符串“rgb(”,例如“RGB(”或“rGb(”。为了兼容性,首选全小写形式“rgb(”。整数值 255 对应于 100%,以及十六进制表示法中的 FFFrgb(255 255 255) = rgb(100% 100% 100%) = #FFF。数值周围允许使用空格字符。所有 RGB 颜色都在 sRGB 色彩空间中指定。使用 sRGB 提供了颜色的明确且客观可衡量的定义,可以将其与国际标准相关联。

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
              | "rgb("integer integer integer")"
              | "rgb("integer "%" integer "%" integer "%)"
              | color-keyword
hexdigit ::= [0-9A-Fa-f]

其中,color-keyword(不区分大小写)与CSS 颜色模块 Level 3中列出的颜色关键字之一匹配,或与颜色用户偏好设置(CSS2,第 18.2 节)中列出的系统颜色关键字之一匹配。

坐标

<coordinate>

<coordinate> 是用户坐标系中的一个长度,表示从用户坐标系原点沿相关轴线(X 坐标为 x 轴,Y 坐标为 y 轴)延伸的给定距离。其语法与<length>相同。

在 SVG DOM 中,<coordinate> 表示为SVGLengthSVGAnimatedLength

频率

<frequency>

频率值用于声音属性。如 CSS2 中所定义,频率值是一个<number>,后面紧跟着一个频率单位标识符。频率单位标识符包括:

  • Hz:赫兹
  • kHz:千赫兹

频率值不能为负数。

FuncIRI

<FuncIRI>

用于引用的函数表示法。此引用的语法与CSS URI相同。

整数

<integer>

<integer> 指定为一个可选的符号字符(+-),后面跟着一个或多个数字 09

integer ::= [+-]? [0-9]+

如果不存在符号字符,则该数字为非负数。

除非对于特定属性另有说明,否则 <integer> 的范围(至少)包括 -21474836482147483647

在 SVG DOM 中,<integer> 表示为一个 numberSVGAnimatedInteger

IRI

<IRI>

Internationalized Resource Identifier(国际化资源标识符)。

在互联网上,资源使用 IRI(国际化资源标识符)进行标识。例如,位于 http://example.com 的名为 someDrawing.svg 的 SVG 文件可能具有以下 IRI

http://example.com/someDrawing.svg

IRI 还可以通过包含 IRI 片段标识符作为 IRI 的一部分来寻址 XML 文档中的特定元素。包含 IRI 片段标识符的 IRI 由一个可选的基本 IRI、一个“#”字符以及 IRI 片段标识符组成。例如,以下 IRI 可用于指定文件 someDrawing.svg 中 ID 为“Lamppost”的元素:

http://example.com/someDrawing.svg#Lamppost

IRI 用于 href 属性。某些属性允许 IRI 和文本字符串作为内容。为了区分文本字符串和相对 IRI,使用函数表示法 <FuncIRI>。这是一种用函数表示法分隔的 IRI。注意:出于历史原因,为了与 CSS 规范兼容,分隔符为“url(”和“)”。FuncIRI 形式用于表示属性。

SVG 广泛使用 IRI 引用(绝对和相对)来引用其他对象。例如,要使用线性渐变填充矩形,首先需要定义一个<linearGradient> 元素并为其指定一个 ID,如下所示:

html
<linearGradient xml:id="MyGradient">...</linearGradient>

然后,在矩形的 fill 属性的值中引用线性渐变,如下例所示:

html
<rect fill="url(#MyGradient)" />

SVG 支持两种类型的 IRI 引用:

  • 本地 IRI 引用,其中 IRI 引用不包含 <absoluteIRI> 或 <relativeIRI>,因此仅包含片段标识符(即 #<elementID>#xpointer(id<elementID>))。
  • 非本地 IRI 引用,其中 IRI 引用确实包含 <absoluteIRI> 或 <relativeIRI>。有关 SVG 中 IRI 引用的完整规范,请参阅SVG 1.1(第二版):IRI 引用

长度

<length>

长度是距离测量,表示为一个数字以及一个单位。SVG2 规范与 CSS <length> 数据类型和单位保持一致,用于属性语法和值。必须提供长度单位标识符,并且长度单位标识符的值不区分大小写。语法遵循 CSS <length> 语法。

length ::= <number> (<absolute-length> | <relative-length>)?

对于 SVG1.1 中定义的 SVG 特定属性及其对应的表示属性,值中的单位标识符是可选的。如果未提供,则长度值表示当前用户坐标系中的距离。当用于所有属性(无论是在 SVG 中还是在 CSS 中定义)的表示属性时,长度标识符必须小写。为了与 CSS 保持一致,SVG2 中放松了这种大小写敏感性。

请注意,非属性 <length> 定义也允许使用百分比 (%) 单位标识符。百分比长度值的含义取决于已指定百分比长度值的属性。两种常见情况是:

  • 当百分比长度值表示视口宽度或高度的百分比时。
  • 当百分比长度值表示给定对象边界框宽度或高度的百分比时。

在 SVG DOM 中,<length> 值使用SVGLengthSVGAnimatedLength 对象表示。

T 列表

<list-of-Ts>

(其中 T 是某种类型。)列表由一系列分隔的值组成。除非另有明确说明,否则 SVG XML 属性中的列表可以是逗号分隔(在逗号前后可以有可选的空格),也可以是空格分隔。

列表中的空格定义为一个或多个以下连续字符:“空格”(U+0020)、“制表符”(U+0009)、“换行符”(U+000A)、“回车符”(U+000D)和“换页符”(U+000C)。

以下是描述 <list-of-Ts> 语法的 EBNF 语法模板:

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

在 SVG DOM 中,<list-of-Ts> 类型的值由特定类型 T 的接口表示。例如,<list-of-lengths> 在 SVG DOM 中使用SVGLengthListSVGAnimatedLengthList 对象表示。

名称

<name>

名称,即一个字符串,其中不允许使用一些具有语法意义的字符。

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

数字

<number>

实数以两种方式之一指定。在样式表中使用时,<number> 定义如下:

number ::= integer
            | [+-]? [0-9]* "." [0-9]+

此语法与 CSS 中的定义相同(CSS2,第 4.3.1 节)。

在 SVG 属性中使用时,<number> 的定义有所不同,以允许更简洁地指定具有较大数量级的数字:

number ::= integer ([Ee] integer)?
            | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

在 SVG DOM 中,<number> 表示为浮点数、SVGNumberSVGAnimatedNumber

数字-可选数字

<number-optional-number>

一对 <number>,其中第二个 <number> 是可选的。

number-optional-number ::= number
                            | number, number

在 SVG DOM 中,<number-optional-number> 使用一对SVGAnimatedIntegerSVGAnimatedNumber 对象表示。

不透明度值

<opacity-value>

当前对象填充的颜色或内容的不透明度,作为<number>。任何超出 0.0(完全透明)到 1.0(完全不透明)范围的值都将被钳制到此范围。

涂料

<paint>

fillstroke 属性的值定义了在填充或描边给定图形元素时使用的涂料类型。<paint> 的可用选项和语法如下:

paint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke

context-fillcontext-stroke 值允许在markeruse 元素中继承值。

百分比

<percentage>

百分比指定为一个数字,后面跟着一个“%”字符。

percentage ::= number "%"

请注意,<number> 的定义取决于百分比是在样式表中指定,还是在非表示属性的属性中指定。

百分比值始终相对于另一个值(例如,长度)。每个允许使用百分比的属性或特性还定义了百分比所引用的参考距离测量。

在 SVG DOM 中,<percentage> 使用SVGNumberSVGAnimatedNumber 对象表示。

时间

<time>

时间值是一个<number>,后面紧跟着一个时间单位标识符。时间单位标识符包括:

  • ms:毫秒
  • s:秒

变换列表

<transform-list>

<transform-list> 用于指定坐标系转换列表。<transform-list> 的可能值的详细描述在 transform 属性定义中给出。

在 SVG DOM 中,<transform-list> 值使用SVGTransformListSVGAnimatedTransformList 对象表示。

URL

URL

Uniform Resource Locator(统一资源定位符)。

URL 是一系列Unicode 字符,构建到内部或外部资源的地址。

在 SVG 2 之前,使用更受限的IRI 内容类型,因为 URL 规范在此之前尚未标准化。