非常教程

SVG参考手册

内容种类 | Content types

Content types

角度

<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 objects表达。

任意值

<anything>

基本类型<anything>是一个零字符或多字符的序列。具体如下:

anything ::= Char*

在这里,Char 表示一个字符,XML 1.0 第2.2节中定义了它。

时钟值

<clock-value>

时钟值的句法与SMIL Animation规范中写的句法相同。在这里重放一下时钟值的语法:

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 milliseconds 00:00.005 = 5 millisecondsColor <color>基本类型<color>是sRGB颜色空间中颜色的CSS2兼容规范。<彩色>适用于SVG的使用的color属性,是属性的定义的一个组件fillstrokestop-colorflood-colorlighting-color,其中还提供了可选的基于ICC的色彩specifications.SVG支持所有的语法的替代品为<颜色>中所定义CSS2语法和基本数据类型和(取决于实施)CSS颜色模块级别 3.A <颜色>可以是关键字或数字RGB规格。除了这些颜色关键字之外,用户还可以指定与用户环境中的对象使用的颜色相对应的关键字。这些关键字的规范定义可以在颜色的用户偏好设置(CSS2,第18.2节)中找到。十六进制符号的RGB值的格式是紧跟着三个或六个十六进制字符的“#”。三位RGB符号(#rgb)通过复制数字转换为六位数形式(#rrggbb),而不是通过添加零。例如,#fb0扩展为#ffbb00。这确保了white(#ffffff)可以用短符号来指定(#fff)并移除对显示器颜色深度的依赖关系。函数表示法中RGB值的格式是一个RGB开始函数,后跟三个数值(三个整数值或三个百分比值)的逗号分隔列表,后跟“)”。RGB开始函数是不区分大小写的字符串“rgb(”,例如“RGB(”或“rGb(”)。为了兼容性,全小写形式“rgb(”是首选的。整数值255对应于100 %,并以十六进制表示为F或FF:rgb(255,255,255)=rgb(100%,100%,100%)=#FFF。数值附近允许有空白字符。所有RGB颜色都在sRGB颜色空间中指定。使用sRGB提供了一个明确而客观的颜色定义,可以与国际标准相关。color :: =“#”hexdigit hexdigit hexdigit hexdigit hexdigit hexdigit(hexdigit hexdigit hexdigit)?
  • | “rgb(”integer,integer,integer“)”
  • | “rgb(”整数“%”,整数“%”,整数“%)”
  • | color-keyword
  • hexdigit :: = [0-9A-Fa-f]其中color-keyword匹配(不区分大小写)CSS Color Module Level 3中列出的颜色关键字之一,或者颜色用户首选项中列出的系统颜色关键字之一(CSS2,第18.2节)。<color>的相应SVG DOM接口定义是由CSS定义的。SVG对颜色的扩展(包括指定基于ICC的颜色的能力)使用DOM接口表示。SVGColor坐标<坐标> <坐标>是用户坐标系中的长度,它是距用户坐标系原点的给定距离沿着相关轴(X坐标的X轴,Y坐标的Y轴)。其语法与<length>的语法相同。在SVG DOM中,<坐标>表示为an SVGLengthSVGAnimatedLength.Frequency <frequency>频率值与听觉属性一起使用。如CSS2中所定义的,频率值是一个紧跟频率单位标识符的<number>。
  • Hz: 赫兹
  • kHz: 千赫

频率值不能是负数。

FuncIRI

<FuncIRI>用于引用的功能记号法,该引用的句法与css uri相同。

ICCColor

<icccolor>

<icccolor> 一份ICC颜色规范。在SVG 1.1,一份ICC颜色规范,顾名思义,是一个参考了一个<color-profile>元素,以及一个或更多颜色成分值。语法如下所示:

icccolor ::= "icc-color(" name (, number)+ ")"

<icccolor>对应的SVG DOM接口是SVGICCColor

Integer

<integer>

用一个可选的正负符号(“+”或“-”)后面跟着一个或多个0到9的数字可以指定一个<integer>:

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

如果正负符号不出现,则这个数字是非负的。

除非是另有声明为特殊的属性,<integer>的范围是-2147483648到2147483647之间。

在SVG DOM内部,一个<integer>代表了一个数字或者一个SVGAnimatedInteger

IRI

<IRI>

一个国际化资源标识符。

在因特网上,资源是用IRI(一个国际化资源标识符)标识的。举个例子,一个SVG文档调用了位于http://example.com上的someDrawing.svg,可以使用下面的IRI

http://example.com/someDrawing.svg

一个IRI中包含一个IRI片段标识符,就可以定位一个XML文档内部的特定的元素。一个包含有IRI片段标识符的IRI,由一个可选的基础IRI后面跟着一个“#”号,再跟着一个IRI片段标识符组成。举个例子,下面的IRI可以用来指定文件someDrawing.svg中的ID为“Lamppost”的元素:

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

IRIs用在xlink:href属性中。有些属性既允许IRI作为内容,也允许文本字符串。为了消除歧意,避免一个文本字符串被当作IRI,可以使用功能记号法<FuncIRI>。这只是简单用功能记号法分隔一个IRI。注意:出于历史原因,为了与CSS规范兼容,分隔符是“url(”和“)”。该FuncIRI格式用在外观属性中。

SVG广泛地使用了IRI引用,引用对象既可以是绝对引用也可以是引对引用。举个例子,要用线性渐变填充一个矩形,你可以先定义一个<linearGradient>元素,然后给它一个ID,如下:

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

然后你再引用这个线性渐变,作为矩形的属性fill的值,如下:

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

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

  • 本地IRI引用,在这里IRI引用不能包含一个<absoluteIRI><relativeIRI>,因此只能包含一个片段标识符(例如: #<elementID> 或者#xpointer(id<elementID>))。

  • 非本地IRI引用,在这里IRI引用必须包含一个<absoluteIRI><relativeIRI>。

欲了解完整的SVG中的IRI引用的规范请阅读SVG 1.1 (2nd Edition): IRI references。

长度

<length>

一个长度是一个可度量的距离,给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它,可以如下定义<length>:

length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?

请阅读CSS2规范 以了解单位标识符的意义。

在CSS2中定义的长度属性,必须提供单位标识符。而SVG专用属性的长度值以及它们对应的外观属性,长度单位标识符是可选的。如果没有提供单位标识符,长度值代表当前用户坐标系统中的一段距离。对于外观属性,无论是定义在SVG1.1还是定义在CSS2中,长度单位标识符必须是小写的。

如果是在SVG属性中使用长度,<length>需定义如下:

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

在这样的<length>值中,单位标识符必须是小写的。

注意,非属性<length>定义同样允许百分比单位标识符。这意味着一个百分比长度值依赖于被指定百分比长度值的属性。分两种情况:

  • 百分比长度值表达了一个视口宽度或高度的百分比;
  • 百分比长度值表达了一个给定对象上的边界盒的宽度或高度的百分比。

在SVG DOM中,<length>值可以用{domxref("SVGLength")}}对象或SVGAnimatedLength对象来表达。

T值数列

<list-of-Ts>

(在这里T某些类型。)由一系列分开的值构成的数列。除非另有说明,SVG的XML属性内的数列既可以是逗号分隔的,也可以是空格分隔的。用逗号作分隔符,逗号前面或后面可有带空格。

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

下面是一个EBNF语法的模板,用来描述<list-of-Ts>句法:

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

在SVG DOM内部,<list-of-Ts>类型的值可以用一个限特定类型T的接口来表达。举个例子,SVG DOM中的<list-of-lengths>使用一个SVGLengthList对象或者SVGAnimatedLengthList对象来表达。

命名

<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>可以用浮点数、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范围的值将被压制回这个范围。0.0表示完全透明,1.0表示完全不透明。

上色

<paint>

属性fill和属性stroke的值,是涂色类型的规范,用在要对一个给定元素填充或描边的时候。SVG规范的Specifying paint章节中描述了<paint>可用的选项以及句法。

在SVG DOM内部,<paint>值用SVGPaint对象表达。

百分数

<percentage>

一个数字后面跟着一个百分号“%”就可以指定一个百分数。

percentage ::= number "%"

注意<number>的意义取决于百分数是在一个样式表中指定的,还是在一个SVG属性非外观属性中指定的。

百分数值总是关联到另一个值。举个例子,每种允许百分比的属性同时定义了引用了给百分比数参考的距离测量。

在SVG DOM内部,<percentage>用SVGNumber对象或SVGAnimatedNumber对象表达。

时间

<time>

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

  • ms: 毫秒
  • s: 秒

平移数列

<transform-list>

一个<transform-list>是用来指定一个坐标系统转换数列。属性transform的定义中给出了<transform-list>的可用值的详细描述。

在SVG DOM内部,一个<transform-list>值是用了一个SVGTransformList对象或者SVGAnimatedTransformList对象来表达的。

URL

URL

统一的地址定位器。

URL是构建内部或外部资源地址的Unicode字符序列。

在SVG 2之前,使用了更有限的IRI内容类型,是由于URL规范之前没有被标准化。

内容种类 | Content types相关

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。