SVG 參考手冊


SVG 元素

元素 說明 屬性
<a> 創建一個SVG元素周圍鏈接 xlink:show
xlink:actuate
xlink:href
target
<altGlyph> 允許對象性文字進行控制,來呈現特殊的字符數據 x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> 定義一系列象性符號的替換 id
<altGlyphItem> 定義一系列候選的象性符號的替換 id
<animate> 隨時間動態改變屬性 attributeName="目標屬性名稱"
from="起始值"
to="結束值"
dur="持續時間"
repeatCount="動畫時間將發生"
<animateColor> 定義隨著時間的推移顏色轉換 by="相對偏移值"
from="起始值"
to="結束值"
<animateMotion> 使元素沿著動作路徑移動 calcMode="動畫的插補模式。可以是'discrete', 'linear', 'paced', 'spline'"
path="運動路徑"
keyPoints="沿運動路徑的對象目前時間應移動多遠"
rotate="應用旋轉變換"
xlink:href="一個URI引用<path>元素,它定義運動路徑"
<animateTransform> 動畫上一個目標元素變換屬性,從而使動畫控制平移,縮放,旋轉或傾斜 by="相對偏移值"
from="起始值"
to="結束值"
type="類型的轉換其值是隨時間變化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle> 定義一個圓 cx="圓的x軸坐標"
cy="圓的y軸坐標"
r="圓的半徑". 必需.

+ 顯現屬性:顏色,FillStroke,圖形
<clipPath> 用于隱藏位于剪切路徑以外的對象部分。定義繪制什么和什么不繪制的模具被稱為剪切路徑 clip-path="引用剪貼路徑和引用剪貼路徑交叉"
clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二個值childern一個對象的邊框,會使用掩碼的一小部分單位(默認:"userSpaceOnUse")"
<color-profile> 指定顏色配置文件的說明(使用CSS樣式文件時) local="本地存儲顏色配置文件唯一ID"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="ICC配置文件資源URI"
<cursor> 定義一個獨立于平臺的自定義光標 x="x軸左上角光標(默認為0)"
y="y軸的左上角光標(默認為0)"
xlink:href="使用光標圖像URI
<defs> 引用的元素容器  
<desc> 對 SVG 中的元素的純文本描述 - 并不作為圖形的一部分來顯示。用戶代理會將其顯示為工具提示  
<ellipse> 定義一個橢圓 cx="橢圓x軸坐標"
cy="橢圓y軸坐標"
rx="沿x軸橢圓形的半徑"。必需。
ry="沿y軸長橢圓形的半徑"。必需。

+ 顯現屬性:顏色,FillStroke,圖形
<feBlend> 使用不同的混合模式把兩個對象合成在一起 mode="圖像混合模式:normal|multiply|screen|darken|lighten"
in="標識為給定的濾鏡原始輸入:SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="第二輸入圖像的混合操作"
feColorMatrix SVG濾鏡。適用矩陣轉換  
feComponentTransfer SVG 濾鏡。執行數據的 component-wise 重映射  
feComposite SVG 濾鏡  
feConvolveMatrix SVG 濾鏡  
feDiffuseLighting SVG 濾鏡  
feDisplacementMap SVG 濾鏡  
feDistantLight SVG濾鏡。定義一個光源  
feFlood SVG濾鏡  
feFuncA SVG 濾鏡。feComponentTransfer 的子元素  
feFuncB SVG 濾鏡。feComponentTransfer 的子元素  
feFuncG SVG 濾鏡。feComponentTransfer 的子元素  
feFuncR SVG 濾鏡。feComponentTransfer 的子元素  
feGaussianBlur SVG濾鏡。執行高斯模糊圖像  
feImage SVG濾鏡。  
feMerge SVG濾鏡。建立在彼此頂部圖像層  
feMergeNode SVG 濾鏡。feMerge的子元素  
feMorphology SVG 濾鏡。 對源圖形執行"fattening" 或者 "thinning"  
feOffset SVG濾鏡。相對其當前位置移動圖像  
fePointLight SVG濾鏡  
feSpecularLighting SVG濾鏡  
feSpotLight SVG濾鏡  
feTile SVG濾鏡  
feTurbulence SVG濾鏡  
filter 濾鏡效果的容器  
font 定義字體  
font-face 描述一種字體的特點  
font-face-format    
font-face-name    
font-face-src    
font-face-uri    
foreignObject    
<g> 用于把相關元素進行組合的容器元素 id="該組的名稱"
fill="該組填充顏色"
opacity="該組不透明度"

+ 顯現屬性:
All
glyph 為給定的象形符號定義圖形  
glyphRef 定義要使用的可能的象形符號  
hkern    
<image> 定義圖像 x="圖像的左上角的x軸坐標"
y="圖像的左上角的y軸坐標"
width="圖像的寬度". 必須.
height="圖像的高度". 必須.
xlink:href="圖像的路徑". 必須.

+ 顯現屬性:
Color, Graphics, Images, Viewports
<line> 定義一條線 x1="直線起始點x坐標"
y1="直線起始點y坐標"
x2="直線終點x坐標"
y2="直線終點y坐標"

+ 顯現屬性:
Color, FillStroke, Graphics, Markers
<linearGradient> 定義線性漸變。通過使用矢量線性漸變填充對象,并可以定義為水平,垂直或角漸變。 id="id 屬性可為漸變定義一個唯一的名稱。引用必須"
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用視圖框或對象,以確定相對位置矢量點。 (默認為'objectBoundingBox)"
gradientTransform="適用于漸變的轉變"
x1="漸變向量x啟動點(默認0%)"
y1="漸變向量y啟動點(默認0%)"
x2="漸變向量x的終點。 (默認100%)"
y2="漸變向量y的終點。 (默認0%)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<marker> 標記可以放在直線,折線,多邊形和路徑的頂點。這些元素可以使用maeker屬性的"maeker-start","maeker-mid"和"maeker-end",繼承默認情況下或可設置為"none"或定義的標記的URI。您必須先定義標記,然后才可以通過其URI引用。任何一種形狀,可以把標記放在里面。他們繪制元素時把它們附加到頂部 markerUnits="strokeWidth'或'userSpaceOnUse"。如果是strokeWidth"那么使用一個單位等于一個筆劃寬度。否則,標記尺度不會使用同一視圖單位作為引用元素(默認為'strokeWidth')"
refx="標記頂點連接的位置(默認為0)"
refy="標記頂點連接的位置(默認為0)"
orient="'auto'始終顯示標記的角度。 "auto"將計算某個角度使得X軸一個頂點的正切值(默認為0)
markerWidth="標記的寬度(默認3)"
markerHeight="標記的高度(默認3)"
viewBox="各點"看到"這個SVG繪圖區域。由空格或逗號分隔的4個值。(min x, min y, width, height)"

+ presentation attributes:
All
<mask> 度屏蔽是一種不透明度值的組合和裁剪。像裁剪,您可以使用圖形,文字或路徑定義掩碼的部分。一個掩碼的默認狀態是完全透明的,也就是裁剪平面的對面的。在掩碼的圖形設置掩碼的不透明部分 maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.設定裁剪面是否是相對完整的視窗或對象(默認:'objectBoundingBox')"
maskContentUnits="第二個掩碼相對對象的圖形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'(默認:'userSpaceOnUse')"
x="裁剪面掩碼(默認值:-10%)"
y="裁剪面掩碼(默認值:-10%)"
width="裁剪面掩碼(默認是:120%)"
height="裁剪面掩碼(默認是:120%)"
metadata 指定元數據  
missing-glyph    
mpath    
<path> 定義一個路徑 d="定義路徑指令"
pathLength="如果存在,路徑將進行縮放,以便計算各點相當于此值的路徑長度"
transform="轉換列表"

+ 顯現屬性:
Color, FillStroke, Graphics, Markers
<pattern> 定義坐標,你想要的視圖顯示和視圖的大小。然后添加到您的模式形狀。該模式命中時重復視圖框的邊緣(可視范圍) id="用于引用這個模式的唯一ID。"必需的。
patternUnits="userSpaceOnUse'或'objectBoundingBox"。第二個值X,Y,width,height 一個會使用模式對象的邊框的小部分,單位(%)。"
patternContentUnits="'userSpaceOnUse'或 'objectBoundingBox'"
patternTransform="允許整個表達式進行轉換"
x="模式的偏移量,來自左上角(默認為0)"
y="模式的偏移量,來自左上角(默認為0)"
width="模式平鋪的寬度(默認為100%)"
height="模式平鋪的高度(默認為100%)"
viewBox="各點"看到"這個SVG繪圖區域。由空格或逗號分隔的4個值。(min x, min y, width, height)"
xlink:href="另一種模式,其屬性值是默認值以及任何子類可以繼承。遞歸"
 
<polygon> 定義一個包含至少三邊圖形 points="多邊形的點。點的總數必須是偶數"。必需的。
fill-rule="FillStroke演示屬性的部分"

+ 顯現屬性:
Color, FillStroke, Graphics, Markers
<polyline> 定義只有直線組成的任意形狀 points=折線上的"點"。必需的。

+ 顯現屬性:
Color, FillStroke, Graphics, Markers
<radialGradient> 定義放射性漸變。放射性漸變創建一個圓圈 gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用視圖框或對象以確定相對位置的矢量點。 (默認為'objectBoundingBox)"
gradientTransform="適用于漸變的變換"
cx="漸變的中心點(數字或% - 50%是默認)"
cy="漸變的中心點。 (默認50%)"
r="漸變的半徑。 (默認50%)"
fx="漸變的焦點。 (默認0%)"
fy="漸變的焦點。 (默認0%)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="引用到另一個漸變,其屬性值作為默認值。遞歸"
<rect> 定義一個矩形 x="矩形的左上角的x軸"
y="矩形的左上角的y軸"
rx="x軸的半徑(round元素)"
ry="y軸的半徑(round元素)"
width="矩形的寬度"。必需的。
height="矩形的高度"。必需的。

+ 顯現屬性:
Color, FillStroke, Graphics
script 腳本容器。(例如ECMAScript)  
set 設置一個屬性值指定時間  
<stop> 漸變停止 offset="偏移停止(0到1/0%到100%)". 參考
stop-color="這個stop的顏色"
stop-opacity="這個Stop的不透明度 (0到1)"
style 可使樣式表直接嵌入SVG內容內部  
<svg> 創建一個SVG文檔片段 x="左上角嵌入(默認為0)"
y="左上角嵌入(默認為0)"
width="SVG片段的寬度(默認為100%)"
height="SVG片段的高度(默認為100%)"
viewBox="點"seen"這個SVG繪圖區域。由空格或逗號分隔的4個值。 (min x, min y, width, height)"
preserveAspectRatio="'none'或任何'xVALYVAL'的9種組合,VAL是"min","mid"或"max"。(默認情況下none)"
zoomAndPan="'magnify' or 'disable'.Magnify選項允許用戶平移和縮放您的文件(默認Magnify )"
xml="最外層<svg>元素都需要安裝SVG和它的命名空間: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""

+ 顯現屬性:
All
switch    
symbol    
<text> 定義一個文本 x="列表的X -軸的位置。在文本中在第n個字符的位置在第n個x軸。如果后面存在額外的字符,耗盡他們最后一個字符之后放置的位置。 0是默認"
y="列表的Y軸位置。(參考x)0是默認"
dx="在字符的長度列表中移動相對最后繪制標志符號的絕對位置。(參考x)"
dy="在字符的長度列表中移動相對最后繪制標志符號的絕對位置。(參考x)"
rotate="一個旋轉的列表。第n個旋轉是第n個字符。附加字符沒有給出最后的旋轉值"
textLength="SVG查看器將嘗試顯示文本之間的間距/或字形調整的文本目標長度。(默認:正常文本的長度)"
lengthAdjust="告訴查看器,如果指定長度就嘗試進行調整用以呈現文本。這兩個值是'spacing'和'spacingAndGlyphs'"

+ 顯現屬性:
Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath    
title 對 SVG 中的元素的純文本描述 - 并不作為圖形的一部分來顯示。用戶代理會將其顯示為工具提示  
<tref> 引用任何SVG文檔中的<text>元素和重用 相同的<TEXT>元素
<tspan> 元素等同于<text>,但可以在內部嵌套文本標記以及內部本身 Identical to the <text> element
+ in addition:
xlink:href="引用一個<TEXT>元素"
<use> 使用URI引用一個<G>,<svg>或其他具有一個唯一的ID屬性和重復的圖形元素。復制的是原始的元素,因此文件中的原始存在只是一個參考。原始影響到所有副本的任何改變。 x="克隆元素的左上角的x軸"
y="克隆元素的左上角的y軸"
width="克隆元素的寬度"
height="克隆元素的高度"
xlink:href="URI引用克隆元素"

+ 顯現屬性:
All
view    
vkern