內容型別

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 規範在此之前尚未標準化。