最新的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