SVG基础知识速查笔记
什么是SVG
svg是指可缩放⽮量图形，是⽤于描述⼆维⽮量图形的⼀种图形格式。svg使⽤XML格式来定义图形，除ie8之前版本外，绝不部分浏览器均⽀持svg，可将svg⽂本直接嵌⼊HTML中显⽰。
svg优点是⽂件⼩、缩放旋转均不会失真、线条颜⾊平滑⽆锯齿。
svg⽮量图是⽤数学⽅法描述的图，不适合表现⾃然度较⾼且复杂多变的图。
svg图形元素
使⽤svg中的图形元素前，⾸先要定义⼀组<svg>标签元素，并向该标签添加属性width和height，分别表⽰绘制区域的宽度和⾼度。
需要绘制的图形元素都要添加之前定义的⼀组<svg></svg>之间。
svg中定义了七种形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、线段<line>、折线<polyline>、多边形<polygon>、路径<path>。①.矩形
矩形的参数有6个：
x: 矩形左上⾓的x坐标
y: 矩形左上⾓的y坐标
width: 矩形的宽度
height：矩形的⾼度
rx：对于圆⾓矩形，指定椭圆在x⽅向的半径
ry：对于圆⾓矩形，指定椭圆在y⽅向的半径
⽰例代码：
<svg width="300"height="300">
<!-- 直⾓矩形 -->
<rect x="20"y="20"width="200"height="100" ></rect>
<!-- 圆⾓矩形 -->
<rect x="20"y="150"rx="20"ry="30"width="200"height="100" ></rect>
</svg>
效果截图：
②.圆形与椭圆形
圆形的参数有3个：
cx: 圆⼼的x坐标
cy: 圆⼼的y坐标
r: 圆的半径
椭圆的参数类似于圆形，只是半径分为⽔平半径和垂直半径
cx: 圆⼼的x坐标
cy： 圆⼼的y坐标
rx: 椭圆的⽔平半径
ry: 椭圆的垂直半径
⽰例代码
<svg width="600"height="300">
<!-- 圆形 -->
<circle cx="150"cy="150"r="80" ></circle>
<!-- 椭圆 -->
<ellipse cx="350"cy="150"rx="110"ry="80" ></ellipse>
</svg>
效果截图：
③.线段
线段的参数是起点和终点的坐标。
x1：起点的x坐标
y1: 起点的y坐标
x2: 终点的x坐标
x3：终点的y坐标
⽰例代码：
<svg width="300"height="300">
<line x1="20"y1="20"x2="300"y2="100" ></line>
</svg>
效果截图：
④.多边形和折线
多边形和折线的参数相同，都只有⼀个points参数。这个参数的值是⼀系列的点坐标，不同之处是多边形会将起点与终点连接起来，⽽折线不会。
⽰例代码：
<svg width="600"height="300">
<!-- 多边形 -->
<polygon points="100,20 20,90 60,160 140,160 180,90" ></polygon>
<!-- 折线 -->
<polyline points="100,20 20,90 60,160 140,160 180,90" transform="translate( 200, 0 )"></polyline>
</svg>
效果截图：
⑤.路径
<path>标签的功能是所有图形元素中最强⼤的，所有其他图形元素都可以⽤路径<path></path>来制作出来。类似于折线，路径也是通过⼀系列点坐标来绘制的。
其⽤法是：给出⼀个坐标点，在坐标点前添加⼀个英⽂字母，表⽰如何运动到此坐标点的。
英⽂字母按照功能可以分成五类：
移动类
1. M = moveto：将画笔移动到指定坐标。
直线类
1. L = lineto：画直线到指定坐标
2. H = horizontal lineto：画⽔平直线到指定坐标
3. V = vertical lineto：画垂直直线到指定坐标
曲线类
1. C = curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标
2. S = shorthand/smooth curveto：与前⼀条三次贝塞尔曲线相连，第⼀个控制点为前⼀条曲线第⼆个控制点的对称点，只
需输⼊第⼆个控制点和终点，即可绘制⼀个三次贝塞尔曲线
3. Q = quadratic Bezier curveto：画⼆次贝塞尔曲线经⼀个指定控制点到达终点坐标
4. T = shorthand/smooth quadratic Bezier curveto：与前⼀条⼆次贝塞尔曲线相连，控制点为前⼀条⼆次贝塞尔曲线控制
点的对称点，只需输⼊终点，即可绘制⼀条⼆次贝塞尔曲线。
弧线类
1. A = elliptical arc：画椭圆曲线到达指定坐标
闭合类
1. Z = closepath：绘制⼀条直线连接起点和终点，⽤来封闭图形。
注意：以上命令均为⼤写表⽰，表⽰坐标系中的绝对坐标。也可以使⽤⼩写字母，表⽰的是相对坐标，也就是相对当前画笔所在点。
绘制直线：
<svg width="600"height="300">
<!-- 绘制直线 -->
<path d=" M30,100 L270,300
M30,100 H270
M30,100 V300 "
>
</path>
</svg>
效果截图：
绘制三次贝塞尔曲线：
<svg width="600"height="300">
<!-- 三次贝塞尔曲线 -->
<path d=" M30,100
C100,20 190,20 270,100
S400,180 450,100 "
>
</path>
</svg>
效果截图：
绘制⼆次贝塞尔曲线：
<svg width="600"height="300">
<!-- ⼆次贝塞尔曲线 -->
<path d=" M30,100
Q190,20 270,100
T450,100 "
>
</path>
</svg>
效果截图：
绘制弧线，添加闭合：
<svg width="600"height="500">
<!-- 弧线 + 闭合 -->
<path d=" M100,200
a200,150 0 1,0 150,-150
Z "
>
</path>
</svg>
弧线是根据椭圆来绘制的，对应的参数为A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y )。
rx：椭圆x⽅向的半轴⼤⼩
ry：椭圆y⽅向的半轴⼤⼩
x-axis-rotation：椭圆的x轴与⽔平轴顺时针⽅向的夹⾓
large-arc-flag：有两个值，(1：⼤⾓度弧线；0：⼩⾓度弧线)
sweep-flag：有两个值，(1：顺时针到终点；0：逆时针到终点)
x：终点x坐标
svg图形y：终点y坐标
上述弧线⽰例代码的含义就是：起始画笔的位置是M100,200，a⽤了⼩写字母，表⽰相对坐标，则终点位置就是100+150, 200-150。包含弧线的椭圆的x和y⽅向的半径分别是200和150，椭圆x轴与⽔平轴的夹⾓是0度，采⽤了⼤⾓度弧线、逆时针⾛向终点。最后的Z表⽰将起点与终点闭合。
效果截图：
⑥.⽂字
在svg中可以使⽤<text>标签绘制⽂字，其属性如下：
x：⽂字位置的x坐标
y: ⽂字位置的y坐标
dx：相对于当前位置在x⽅向上平移的距离(值为正则往右，负则往左)
dy：相对于当前位置在y⽅向上平移的距离(值为正则往下，负则往上)
textLength：⽂字的显⽰长度(不⾜则拉长，⾜则压缩)
rotate：旋转⾓度(顺时针为正，逆时针为负)
如果要对⽂字中某⼀部分⽂字单独设置样式，可使⽤<tspan></tspan>标签
<svg width="300"height="300">
<text x="200"y="150"dx="-5"dy="5"rotate="360"textLength="90"> I Love <tspan fill="red">D3</tspan></text>
</svg>
效果截图：
⑦.样式
svg中的样式，可以使⽤class类，也可以直接在元素中写样式。
直接在元素中写样式时⽀持两种写法：单独写、合并写。
单独写：<line fill="yellow" stroke="blue" stroke-width="4" x1="20" y1="20" x2="100" y2="100"></line>
合并写：<line x1="20" y1="20" x2="100" y2="100"></line>
常见样式如下：
fill：填充⾊，也可⽤于改变⽂字<text>的颜⾊
stroke：边框的颜⾊
stroke-width：边框的宽度
stroke-linecap：线头端点的样式，圆⾓、直⾓等
stroke-dasharray：虚线的样式
opacity：透明度，0.0为完全透明，1.0为完全不透明
font-family：字体
font-size：字体⼤⼩
font-weight：字体粗细，有normal、bold、bloder、lighter可选
font-style：字体的样式，斜体等
text-decoration：上划线、下划线等
⑧.标记
标记<marker>可以贴附于<path>、<line>、<polyline>、<polygon>元素上。最典型应⽤是给线段添加箭头。标记<marker>写在<defs></defs>之间。<defs>⽤于定义可重复利⽤的图形元素。
标记<marker>内有这些属性：
viewBox：坐标系的区域
refX、refY：在viewBox内的基准点，绘制时此点在直线端点上
markerUnits：标记⼤⼩的基准，有两个值，即strokeWidth(线的宽度)和userSpaceOnUse(线前端的⼤⼩) markerWidth、markerHeight：标识的⼤⼩
orient：绘制⽅向，可设定为auto(⾃动确认⽅向)和⾓度值
id：标识的id号
然后就在<marker></marker>标签中定义图形，当调⽤这个标记时，就会绘制标记⾥的图形。
以定义⼀个箭头并调⽤为例：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。