內容型別

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 內容型別。