内容类型

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 是任何有效的非控制 Unicode 字符。

时钟值

<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 毫秒
  • 时间计数值
    • 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> 是一个 CSS2 兼容的 sRGB 颜色空间颜色规范。<color> 适用于 SVG 对 color 属性的使用,并且是属性 fillstrokestop-colorflood-colorlighting-color 定义的组成部分,这些属性还提供可选的基于 ICC 的颜色规范。

SVG 中 <color> 的定义与 CSS <color> 定义完全相同。

坐标

<coordinate>

A <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 (国际化资源标识符)。

在 Internet 上,资源使用 IRIs(国际化资源标识符)进行标识。例如,位于 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。注意:出于历史原因,分隔符是 url(),以与 CSS 规范兼容。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>。

IRI 现在是 SVG 2 中一个已弃用的概念,已被通用 URL 类型取代。

长度

<length>

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

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

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

请注意,非属性 <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> 定义如下

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>

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

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

URL

URL

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

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

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