SVG語法標籤屬性解釋手冊

1. SVG元素模塊

Animation.Module	animate animateColor animateTransform animateMotion set mpath
剪裁模塊	clipPath
顏色輪廓模塊	color-profile
條件處理模塊	switch
光標模塊	cursor
擴展性模塊	foreignObject
過濾器模塊	filter feFlood feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight feSpotLight feFuncR feFuncG feFuncB feFuncA
Font.Module	fontfont-face glyph missing-glyph hkern vkern font-face-src font-face-uri font-face-format font-face-name definition-src
梯度模塊	linearGradientradialGradientstop
Hyperlink.Module	a
圖像模塊	image
標記模塊	marker
遮罩模塊	mask
陣列模塊	pattern
腳本模塊	script
造型模塊	path rect circle line polyline polygon ellipse
結構模塊	svg g defs desc title metadata symbol use
樣式模塊	style
文本模塊	text tspan tref textPath altGlyph altGlyphDef altGlyphItem glyphRef
視圖模塊	view

2.SVG解釋的元素

2.1 超鏈接模塊

元素	屬性	描述
a	Core.attrib, Conditional.attrib, Style.attrib, transform, target, GraphicalEvents.attrib, Presentation.attrib, External.attrib, XLinkReplace.attrib	聯結一組圖元, 以鏈接屬性（本地或非本地 URI）。該鏈接在可視化過程中處於非活動狀態，但每次轉換到 CGM 時都保存該鏈接。

2.2 圖像模塊

元素	屬性	內容模型
image	Core.attrib, XLinkEmbed.attrib, Conditional.attrib, Style.attrib, External.attrib, GraphicalEvents.attrib, preserveAspectRatio, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Profile.attrib, Viewport.attrib, transform, x, y, width, height	描述通過外部文件鏈接（相對路徑或絕對路徑）或通過 base64 編碼（這種情況下，可以讀取的格式有：BMP、JPEG、TIFF 或 PNG）定義的矢量圖像或位圖圖像。支持外部位圖圖像鏈接，但不支持矢量圖像鏈接。

2.3 標記模塊

元素	屬性	內容模型
marker	Core.attrib, External.attrib, Style.attrib,Presentation.attrib, viewBox,preserveAspectRatio,refX, refY,markerUnits, markerWidth, markerHeight, orient	通過標記屬性定義一組重用作標記的圖元。不考慮 markerUnits 屬性，它被視爲與屬性 userSpaceOnUse 相同。不考慮 orient 屬性，標記不按照路徑段定向。應用標記時始終不定向。

2.4 陣列模塊

元素	屬性	內容模型
pattern	Core.attrib, XLink.attrib, Conditional.attrib , External.attrib, Style.attrib, Presentation.attrib, viewBox, preserveAspectRatio, patternTransform, x, y, width, height, patternUnits	定義一組重用於填充或繪製造型的圖元。不考慮 patternUnits 屬性，它被視爲與屬性 userSpaceOnUse 相同。僅解釋用位圖陣列定義的陣列。不識別用向量元素集定義的陣列。因此，陣列元素的子級應爲 <image> 類型。這樣可以讀取包含填充紋理的工程製圖文檔。

2.5 造型模塊

元素	屬性	內容模型
path	Core.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, d, pathLength, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Marker.attrib	定義造型的輪廓。它由圓弧、橢圓弧、直線、三次貝塞爾曲線<!--webbot bot="HTMLMarkup" startspan --><!--webbot bot="HTMLMarkup" endspan -->和二次貝塞爾曲線<!--webbot bot="HTMLMarkup" startspan --><!--webbot bot="HTMLMarkup" endspan -->組成。此輪廓可以是封閉的或開放的。更多信息可參見“SVG中Path路徑指令教程”。
rect	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x, y, width, height, rx,ry,transform	定義矩形。不解釋圓角。
circle	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, r, transform	定義圓。
line	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x1, y1, x2, y2, transform	定義直線。
ellipse	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, rx, ry, transform	定義橢圓。
polyline	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform	定義折線。如果折線處於開放模式，則僅繪製輪廓，不填充折線。
polygon	Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform	定義多邊形

2.6 結構模塊

元素	屬性	內容模型
svg	Core.attrib, Conditional.attrib, Style.attrib, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, contentScriptType, contentStyleType, External.attrib, Presentation.attrib, GraphicalEvents.attrib, DocumentEvents.attrib	編組 SVG 圖像。
g	Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform	將具有相同屬性的一個或多個元素編組在一起。
defs	Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform	定義要重用的元素組。它的子級因此是參考元素。
desc	Core.attrib, Style.attrib	描述元素。
title	Core.attrib, Style.attrib	指示元素的標題。
symbol	Core.attrib, Style.attrib, External.attrib, viewBox, preserveAspectRatio, Presentation.attrib, GraphicsElementEventAttrs	定義一組要重用的元素。
use	Core.attrib, Style.attrib, Conditional.attrib, transform,x, y, width, height, XLinkEmbed.attrib, Presentation.attrib, GraphicsElementEventAttrs	參考一組預定義元素以便顯示它。

2.7 文本模塊

元素	屬性	內容模型
text	Core.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, x, y, dx,dy,rotate, textLength,lengthAdjust, GraphicalEvents.attrib,Paint.attrib, Font.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, TextContent.attrib, Text.attrib	定義文本。文本顏色是筆畫顏色定義的顏色，如果沒有明確定義筆畫顏色，則使用填充顏色。

三、SVG模塊屬性

3.1 動畫屬性集

集合名稱	集合屬性
Animation.attrib	XLink.attrib
AnimationAttribute.attrib	attributeName, attributeType
AnimationTiming.attrib	begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
AnimationValue.attrib	calcMode, values, keyTimes, keySplines, from, to, by
AnimationAddtion.attrib	additive, accumulate

3.2 動畫事件屬性模塊

集合名稱	集合屬性
AnimationEvents.attrib	onbegin, onend, onrepeat, onload

3.3 剪裁屬性集

集合名稱	集合屬性
Clip.attrib	clip-path, clip-rule

3.4 條件處理屬性集

集合名稱	集合屬性
Conditional.attrib	requiredFeatures, requiredExtensions, systemLanguage

3.5 容器屬性模塊

集合名稱	集合屬性
Container.attrib	enable-background

3.6 內核屬性模塊

集合名稱	集合屬性
Core.attrib	id, xml:base, xml:lang, xml:space

3.7 光標屬性集

集合名稱	集合屬性
Cursor.attrib	cursor

3.8 文檔事件屬性模塊

集合名稱	集合屬性
DocumentEvents.attrib	onunload, onabort, onerror, onresize, onscroll, onzoom

3.9 外部資源要求屬性模塊

集合名稱	集合屬性
External.attrib	externalResourcesRequired

3.10 梯度屬性集

集合名稱	集合屬性
Gradient.attrib	stop-color, stop-opacity

3.11 圖形元素事件屬性模塊

集合名稱	集合屬性
GraphicalEvents.attrib	onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload

3.12 圖形屬性模塊

集合名稱	集合屬性
Graphics.attrib	display, image-rendering, pointer-events, shape-rendering, text-rendering,visibility

3.13 過濾器屬性集

集合名稱	集合屬性
Filter.attrib	filter
FilterColor.attrib	color-interpolation-filters
FilterPrimitive.attrib	x, y, width, height, result
FilterPrimitiveWithIn.attrib	FilterPrimitive.attrib, in

3.14 標記屬性集

集合名稱	集合屬性
Marker.attrib	marker-start, marker-mid, marker-end

3.15 遮罩屬性集

集合名稱	集合屬性
Mask.attrib	mask

3.16 不透明屬性模塊

集合名稱	集合屬性
Opacity.attrib	opacity, stroke-opacity, fill-opacity

3.17 塗料屬性模塊

集合名稱	集合屬性
Paint.attrib	color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation, color-rendering

3.18 樣式屬性集

集合名稱	集合屬性
Style.attrib	style, class

3.19 文本屬性集

集合名稱	集合屬性
Text.attrib	writing-mode
TextContent.attrib	alignment-baseline, baseline-shift, direction, dominant-baseline, glyph-orientation-horizontal, glyph-orientation-vertical, kerning, letter-spacing, text-anchor, text-decoration, unicode-bidi, word-spacing
Font.attrib	font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight

3.20 視口屬性模塊

集合名稱	集合屬性
Viewport.attrib	clip, overflow

　　視口屬性更多的文章請瀏覽："SVG格式圖形顯示的座標系統規則"

3.21 XLink 屬性模塊

集合名稱	集合屬性
XLink.attrib	xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkRequired.attrib	xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkEmbed.attrib	xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkReplace.attrib	xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate

四、SVG解釋的屬性

4.1 內核屬性模塊

集合名稱	集合屬性
id	圖形圖元的標識符。

4.2 圖形屬性模塊

集合名稱	集合屬性
display	顯示或隱藏圖形圖元。僅解釋值“none”。

4.3 標記屬性集

集合名稱	集合屬性
marker-start	在圖元的第一個點繪製標記。
marker-mid	在圖元的每個其它點（即除第一個點和最後一個點）繪製標記。
marker-end	在圖元的最後一個點繪製標記。

4.4 不透明屬性模塊

集合名稱	集合屬性
opacity	定義圖元的透明度。只有能夠另存爲光柵圖像的格式纔可以管理透明度。因此，不顯示透明度。而且，即使當另存爲光柵圖像時，透明度也不支持嵌套。
stroke-opacity	定義圖元輪廓的透明度。只有能夠另存爲光柵圖像的格式纔可以管理透明度。因此，不顯示透明度。而且，即使當另存爲光柵圖像時，透明度也不支持嵌套。
fill-opacity	定義圖元填充的透明度。只有能夠另存爲光柵圖像的格式纔可以管理透明度。因此，不顯示透明度。而且，即使當另存爲光柵圖像時，透明度也不支持嵌套。

4.5 塗料屬性模塊

集合名稱	集合屬性
color	定義顏色。<color> 類型符合 sRGB 空間中定義的顏色的 CSS2 規格。該屬性支持 [CSS2-color-types] 中定義的幾種語法（有關詳細信息，請訪問 w3c.org Internet 站點），還支持一個關鍵字列表，列表中的每個關鍵字與一種顏色關聯。支持的數字顏色規格語法有：#rgb 或 #rrggbb 或 rgb(R, G, B) 或 rgb(R%, G%, B%)。下面是使用不同的語法指定相同顏色的示例： EM { color:#f00 } /* #rgb / EM { color:#ff0000 } / #rrggbb / EM { color:rgb(255,0,0) } / integer range 0 - 255 / EM { color:rgb(100%, 0%, 0%) } / float range 0.0% - 100.0% */
fill	定義填充類型。支持“none”、“current-color”值或顏色。不支持梯度。
fill-rule	定義填充多邊形時使用的算法。僅支持“nonzero”算法。不支持“evenodd”算法。
stroke	定義如何繪製元素。支持“none”、“current-color”值或顏色。不支持陣列和梯度。
stroke-dasharray	定義爲得到點線所應用的陣列。
stroke-linecap	定義繪製輪廓時在輪廓的末尾使用的造型：round, square 等。以向量格式保存時包括此屬性。但是，不支持顯示和以光柵格式保存它。
stroke-linejoin	定義繪製折線的角時使用的造型：round, miter 等。以向量格式保存時包括此屬性。但是，不支持顯示和以光柵格式保存它。
stroke-width	定義筆畫寬度。以向量格式保存時包括此屬性。但是，使用細寬度可以描繪非常粗的筆畫。

4.6 樣式屬性集

集合名稱	集合屬性
style	將所有屬性編組在一起。

4.7 文本屬性集

集合名稱	集合屬性
letter-spacing	定義每個字符之間使用的間距。 TrueType 字體顯示不支持該屬性，因此也不支持大量的生成器（離散化）。
text-anchor	定義文本對齊方式。
font-family	定義字體系列的名稱。僅正確解釋第 5 版支持的字體，否則使用默認字體。更多信息...
font-size	定義文本高度。高度必須定義爲長度或百分比。
font-weight	定義是使用粗體還是普通樣式呈現文本。 TrueType 字體顯示不支持該屬性，因此也不支持大量的生成器（離散化）。

4.8 XLink 屬性模塊

集合名稱	集合屬性
xlink:href	定義鏈接。爲鏈接元素或定義光柵圖像解釋該屬性。
xlink:show	定義如何顯示鏈接指向的資源。

4.9 變換屬性

　　分析和處理變換屬性。應用下面的變換：

matrix(<a> <b> <c> <d> <e> <f>)，以六個值的變換矩陣形式指定變換

translate(<tx> [<ty>])，通過 tx 和 ty 指定平移

scale(<sx> [<sy>])，通過 sx 和 sy 指定縮放操作

rotate(<rotate-angle> [<cx> <cy>])，指定繞給定點旋轉 <rotate-angle> 度

skewX(<skew-angle>)，指定沿 x 軸的扭曲變換

skewY(<skew-angle>)，指定沿 y 軸的扭曲變換。

站內首發文章

Yeah

發佈了22 篇原創文章 · 獲贊 2 · 訪問量 10萬+

私信關注