最新的Web開發教程
 

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="the name of the target attribute"
by="a relative offset value"
from="the starting value"
to="the ending value"
dur="the duration"
repeatCount="the number of time the animation will take place"
<animateMotion> 原因引用元素沿運動路徑移動 calcMode="the interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'"
path="the motion path"
keyPoints="how far along the motion path the object shall move at the moment in time"
rotate="applies a rotation transformation"
xlink:href="an URI reference to the <path> element which defines the motion path"
<animateTransform> 動畫目標元件上的轉換屬性,由此允許動畫控制平移,縮放,旋轉和/或傾斜 by="a relative offset value"
from="the starting value"
to="the ending value"
type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle> 定義一個圓 cx="the x-axis center of the circle"
cy="the y-axis center of the circle"
r="The circle's radius". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<clipPath> 裁剪是關於隱藏通常會得出什麼。 它定義了什麼是,什麼是不畫被稱為剪貼路徑的模板 clip-path="the referenced clipping path is intersected with the referencing clipping path"
clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse') "
<color-profile> 指定顏色配置文件描述(當文檔是使用CSS樣式) local="the unique ID for a locally stored color profile"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="the URI of an ICC profile resource"
<cursor> 定義一個獨立於平台的自定義光標 x="the x-axis top-left corner of the cursor (default is 0) "
y="the y-axis top-left corner of the cursor (default is 0) "
xlink:href="the URI of the image to use as the cursor
<defs> 一種引用元素的容器  
<desc> 在SVG容器元素和圖形元素的純文本描述(用戶代理可能會顯示為工具提示)  
<ellipse> 定義一個橢圓 cx="the x-axis center of the ellipse"
cy="the y-axis center of the ellipse"
rx="the length of the ellipse's radius along the x-axis". Required.
ry="the length of the ellipse's radius along the y-axis". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<feBlend> 一起按一定的混合模式構成的兩個對象 mode="the image blending modes: normal|multiply|screen|darken|lighten"
in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="the second input image to the blending operation"
feColorMatrix SVG濾鏡。 應用矩陣轉換  
feComponentTransfer SVG濾鏡。 執行數據的組件重新映射  
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="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"

+ presentation attributes:
All
glyph 定義圖形用於給定字形  
glyphRef 定義可能字形使用  
hkern 
<image> 定義圖像 x="the x-axis top-left corner of the image"
y="the y-axis top-left corner of the image"
width="the width of the image". Required.
height="the height of the image". Required.
xlink:href="the path to the image". Required.

+ presentation attributes:
Color, Graphics, Images, Viewports
<line> 定義線條 x1="the x start point of the line"
y1="the y start point of the line"
x2="the x end point of the line"
y2="the y end point of the line"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<linearGradient> 定義的線性梯度。 線性梯度用向量填充對象,並且可以被定義為水平,垂直或角梯度。 id="the unique id used to reference this pattern. Required to reference it"
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
x1="the x start point of the gradient vector (number or % - 0% is default) "
y1="the y start point of the gradient vector. (0% default) "
x2="the x end point of the gradient vector. (100% default) "
y2="the y end point of the gradient vector. (0% default) "
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"和“標記結束”“在默認情況下繼承或者可以設置為”無“或定義的標記的URI。 你必須首先定義標記之前,你可以通過它的URI引用它。 任何一種形狀,可以在裡面標記放。 它們被繪製在它們所連接的元件的頂 markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the the same view units as the referencing element (default 'strokeWidth') "
refx="the position where the marker connects with the vertex (default 0) "
refy="the position where the marker connects with the vertex (default 0) "
orient="'auto' or an angle to always show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0) "
markerWidth="the width of the marker (default 3) "
markerHeight="the height of the marker (default 3) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "

+ presentation attributes:
All
<mask> 掩蔽是不透明度值和限幅的組合。 像剪裁可以使用圖形,文本或路徑來定義掩模部分。 掩模的默認狀態是完全透明的是剪切平面的對面。 在掩模圖形設置掩模的不透明部分是如何 maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the clipping plane is relative the full view port or object (default: 'objectBoundingBox') "
maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') "
x="the clipping plane of the mask (default: -10%) "
y="the clipping plane of the mask (default: -10%) "
width="the clipping plane of the mask (default: 120%) "
height="the clipping plane of the mask (default: 120%) "
metadata 指定的元數據  
missing-glyph 
mpath 
<path> 定義路徑 d="a set of commands which define the path"
pathLength="If present, the path will be scaled so that the computed path length of the points equals this value"
transform="a list of transformations"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<pattern> 定義要視圖以顯示坐標和視圖的大小。 然後添加形狀到您的模式。 當視圖框的邊緣這一方式反复進行(viewing area)被擊中 id="the unique id used to reference this pattern." Required.
patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern."
patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'"
patternTransform="allows the whole pattern to be transformed"
x="pattern's offset from the top-left corner (default 0) "
y="pattern's offset from the top-left corner. (default 0) "
width="the width of the pattern tile (default 100%) "
height="the height of the pattern tile (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "
xlink:href="reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive"
 
<polygon> 定義了包含至少三個側面的圖形 points="the points of the polygon. The total number of points must be even". Required.
fill-rule="part of the FillStroke presentation attributes"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<polyline> 定義只包括直線任何形狀 points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> 定義一個徑向漸變。 徑向梯度通過取一個圓,順暢地從焦點到外部半徑變化梯度站之間的值創建。 gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
cx="the center point of the gradient (number or % - 50% is default) "
cy="the center point of the gradient. (50% default) "
r="the radius of the gradient. (50% default) "
fx="the focus point of the gradient. (0% default) "
fy="The focus point of the gradient. (0% default) "
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<rect> 定義一個矩形 x="the x-axis top-left corner of the rectangle"
y="the y-axis top-left corner of the rectangle"
rx="the x-axis radius (to round the element) "
ry="the y-axis radius (to round the element) "
width="the width of the rectangle". Required.
height="the height of the rectangle" Required.

+ presentation attributes:
Color, FillStroke, Graphics
script 容器腳本(eg, ECMAScript)  
set 設置屬性的值指定的持續時間  
<stop> 對於一個梯度解數 offset="the offset for this stop (0 to 1/0% to 100%) ". Required.
stop-color="the color of this stop"
stop-opacity="the opacity of this stop (0 to 1) "
style 允許樣式表,SVG內容中直接嵌入  
<svg> 創建一個SVG文檔片段 x="top left corner when embedded (default 0) "
y="top left corner when embedded (default 0) "
width="the width of the svg fragment (default 100%) "
height="the height of the svg fragment (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "
preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid) "
zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify) "
xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""

+ presentation attributes:
All
switch 
symbol 
<text> 定義文本 x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If there are additional characters after the positions run out they are placed after the last character. 0 is default"
y="a list of y-axis positions. (see x) . 0 is default"
dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) "
dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) "
rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value"
textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length) "
lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'"

+ presentation attributes:
Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath 
title 在SVG元素的純文本描述 - 不顯示圖形的一部分。 用戶代理可能會顯示為工具提示。  
<tref> 任何引用<text>的SVG文件中的元素和重用 Identical to the <text> element
<tspan> 等同於<text>元素,但可以嵌套在文本標籤和內部本身 Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> 使用URI引用一個<G>, <svg>或其他圖形元素一個唯一的ID屬性,並複製它。 副本是唯一的原始所以只有原來存在的文件中的參考。 原來的任何更改將影響所有副本。 x="the x-axis top-left corner of the cloned element"
y="the y-axis top-left corner of the cloned element"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"

+ presentation attributes:
All
view 
vkern