svg 用法详解

网上收录了一些svg常用的用法，在这里总结一下。

一. svg标签

<svg width="50" height="40" viewBox="0 0 100 100"></svg>

名称	用法	描述
width	width=“50”	SVG代码所占用的宽度
height	height=“40”	SVG代码所占用的高度
viewBox	viewBox=“0 0 100 100”	viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

二. path标签

<svg width="100%" height="100%" viewBox="0 0 100 100">
 <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>

名称	用法	描述
d	d=“M0,0 L240,0 L240,240 L0,240 Z”	绘图路径，path上最复杂也是最重要的属性，下面一个表格将介绍 d属性上各个字母所代表的含义
fill	fill="#fff"，fill=“url(#orange_red)”	填充颜色，渐变填充
fill-opacity	fill-opacity=“0”	填充透明度，填充不给颜色默认是黑色，不想用填充颜色的可以把填充设置透明
stroke	stroke="#000"，stroke=“url(#orange_red)”	描边颜色，描边渐变
stroke-width	stroke-width=“10”	描边宽度
stroke-linecap	stroke-linecap=“square”	路径两端的形状, 可选属性 butt
transform	transform=“translate(5,5)”	形变，和css3 transform属性用法一致

d属性介绍

名称	用法	描述
M	M0,0	相当于 moveto(M X,Y)，将画笔移动到指定的坐标位置
L	L240,0	相当于 lineto(L X,Y)，画直线到指定的坐标位置
H	H240	相当于 horizontal lineto(H X)，画水平线到指定的X坐标位置
V	V240	相当于 vertical lineto(V Y)，画垂直线到指定的Y坐标位置
C	CX1,Y1,X2,Y2,ENDX,ENDY	相当于 curveto(C X1,Y1,X2,Y2,ENDX,ENDY)，三次贝赛曲线
S	SX2,Y2,ENDX,ENDY	相当于 smooth curveto(S X2,Y2,ENDX,ENDY)，平滑曲率
Q	QX,Y,ENDX,ENDY	相当于 quadratic Belzier curve(Q X,Y,ENDX,ENDY)，二次贝赛曲线
T	TENDX,ENDY	相当于 smooth quadratic Belzier curveto(T ENDX,ENDY)，映射
A	ARX,RY,XROTATION,FLAG1,FLAG2,X,Y	相当于 elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)，弧线
Z	Z	相当于 closepath()，关闭路径