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> 標記可以放在直線,折線,多邊形和路徑的頂點。這些元素可以使用marker屬性的"marker-start","marker-mid"和"marker-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