内容类型
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> 值使用
SVGAngle
或SVGAnimatedAngle
对象表示。
任何
- <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
属性的使用,并且是属性fill
、stroke
、stop-color
、flood-color
和lighting-color
定义的组成部分,这些属性还提供可选的基于 ICC 的颜色规范。SVG 中 <color> 的定义与 CSS
<color>
定义完全相同。
坐标
- <coordinate>
-
A <coordinate> 是用户坐标系中的一个长度,它是从用户坐标系原点沿相关轴(X 坐标的 X 轴,Y 坐标的 Y 轴)的给定距离。其语法与 <length> 的语法相同。
在 SVG DOM 中,<coordinate> 表示为
SVGLength
或SVGAnimatedLength
。
频率
- <frequency>
-
频率值用于听觉属性。根据 CSS2 中的定义,频率值是紧跟频率单位标识符的 <number>。频率单位标识符是
Hz
:赫兹kHz
:千赫兹
频率值不能为负数。
FuncIRI
整数
- <integer>
-
一个 <integer> 被指定为一个可选的符号字符(
+
或-
),后跟一个或多个数字0
到9
integer ::= [+-]? [0-9]+
如果不存在符号字符,则该数字为非负数。
除非另有说明,对于特定属性或特性,<integer> 的范围至少包括
-2147483648
到2147483647
。在 SVG DOM 中,<integer> 表示为
number
或SVGAnimatedInteger
。
IRI
- <IRI>
-
Internationalized Resource Identifier (国际化资源标识符)。
在 Internet 上,资源使用 IRIs(国际化资源标识符)进行标识。例如,位于
http://example.com
的名为someDrawing.svg
的 SVG 文件可能具有以下 IRIhttp://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 类型取代。
- 本地 IRI 引用,其中 IRI 引用不包含 <absoluteIRI> 或 <relativeIRI>,因此只包含片段标识符(即
长度
- <length>
-
长度是一个距离测量值,以数字和单位给出。SVG2 规范在属性语法和值方面与 CSS
<length>
数据类型和单位保持一致。必须提供长度单位标识符,并且长度单位标识符的值不区分大小写。语法遵循 CSS<length>
语法length ::= <number> (<absolute-length> | <relative-length>)?
对于 SVG1.1 中定义的 SVG 特定属性及其相应的表示属性,值中的单位标识符是可选的。如果未提供,则长度值表示当前用户坐标系中的距离。当在所有属性(无论是在 SVG 中还是在 CSS 中定义的)的表示属性中使用时,长度标识符必须是小写。在 SVG2 中,这种大小写敏感性已放宽,以与 CSS 对齐。
请注意,非属性 <length> 定义还允许使用百分比 (
%
) 单位标识符。百分比长度值的含义取决于指定百分比长度值的属性。两个常见情况是- 当百分比长度值表示视口宽度或高度的百分比时
- 当百分比长度值表示给定对象上边界框宽度或高度的百分比时。
在 SVG DOM 中,<length> 值使用
SVGLength
或SVGAnimatedLength
对象表示。
列表-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 中使用
SVGLengthList
或SVGAnimatedLengthList
对象表示。
名称
- <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> 表示为浮点数、
SVGNumber
或SVGAnimatedNumber
。
数字-可选-数字
- <number-optional-number>
-
一对 <number>,其中第二个 <number> 是可选的。
number-optional-number ::= number | number, number
在 SVG DOM 中,<number-optional-number> 使用一对
SVGAnimatedInteger
或SVGAnimatedNumber
对象表示。
不透明度值
- <opacity-value>
-
当前对象填充的颜色或内容的不透明度,表示为 <number>。任何超出
0.0
(完全透明)到1.0
(完全不透明)范围的值都将被限制在此范围内。
绘制
百分比
- <percentage>
-
百分比表示为一个数字,后跟一个
%
字符percentage ::= number "%"
请注意,<number> 的定义取决于百分比是在样式表中还是在并非表示属性的属性中指定。
百分比值始终相对于另一个值(例如,长度)。每个允许百分比的属性或特性还定义了百分比所指的参考距离测量值。
在 SVG DOM 中,<percentage> 使用
SVGNumber
或SVGAnimatedNumber
对象表示。
时间
- <time>
-
时间值是一个 <number>,紧跟一个时间单位标识符。时间单位标识符是
ms
:毫秒s
:秒
转换列表
- <transform-list>
-
A <transform-list> 用于指定坐标系变换列表。<transform-list> 可能值的详细描述在
transform
属性定义中给出。在 SVG DOM 中,<transform-list> 值使用
SVGTransformList
或SVGAnimatedTransformList
对象表示。