Skip to content

Latest commit

 

History

History
175 lines (173 loc) · 8.33 KB

02、svg基础.md

File metadata and controls

175 lines (173 loc) · 8.33 KB

SVG基础

元素 说明 属性
<a> 创建一个SVG元素周围链接 xlink:show
xlink:actuate
xlink:href
target
<circle> 定义一个圆 cx="圆的x轴坐标"
cy="圆的y轴坐标"
r="圆的半径". 必需.

+ 显现属性:颜色,FillStroke,图形
<clipPath> 用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径 clip-path="引用剪贴路径和引用剪贴路径交叉"
clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值childern一个对象的边框,会使用掩码的一小部分单位(默认:"userSpaceOnUse")"
<ellipse> 定义一个椭圆 cx="椭圆x轴坐标"
cy="椭圆y轴坐标"
rx="沿x轴椭圆形的半径"。必需。
ry="沿y轴长椭圆形的半径"。必需。

+ 显现属性:颜色,FillStroke,图形
<g> 用于把相关元素进行组合的容器元素 id="该组的名称"
fill="该组填充颜色"
opacity="该组不透明度"

+ 显现属性:
All
<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
<path> 定义一个路径 d="定义路径指令"
pathLength="如果存在,路径将进行缩放,以便计算各点相当于此值的路径长度"
transform="转换列表"

+ 显现属性:
Color, FillStroke, Graphics, Markers
<polygon> 定义一个包含至少三边图形 points="多边形的点。点的总数必须是偶数"。必需的。
fill-rule="FillStroke演示属性的部分"

+ 显现属性:
Color, FillStroke, Graphics, Markers
<polyline> 定义只有直线组成的任意形状 points=折线上的"点"。必需的。

+ 显现属性:
Color, FillStroke, Graphics, Markers
<rect> 定义一个矩形 x="矩形的左上角的x轴"
y="矩形的左上角的y轴"
rx="x轴的半径(round元素)"
ry="y轴的半径(round元素)"
width="矩形的宽度"。必需的。
height="矩形的高度"。必需的。

+ 显现属性:
Color, FillStroke, Graphics
<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
<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