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 |