SVG标签介绍

svg标签

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

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

路径 path

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L211 200 Z" />
</svg>
 
// 开始位置为150 0，到达75 200 再从哪里开始到 211 200 ,返回150 0关闭路劲。
// M 设置开始
// L 设置中间点
// Z 设置结束点

名称	用法	描述
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	width=“50”	描边颜色，描边渐变
stroke-width	width=“50”	描边宽度
stroke-linecap	width=“50”	路径两端的形状, 可选属性 butt
transform	width=“50”	形变，和css3 transform属性用法一致

path标签中的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()，关闭路径

矩形 rect

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <rect x="50" y="20" rx="20" ry="20" width="300" height="100" style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0); fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>
 
// rx 和 ry 用来产生圆角。
// x 和 y 用来设置svg距离浏览器左侧和顶端的距离。
// width 和 height 属性可定义矩的宽度和高度。
// style 属性用来定义CSS属性
// CSS 中的fill用来定义填充颜色，stroke-width定义边框宽度，stroke定义边框颜色，fill-opacity定义填充颜色透明度，stroke-opacity定义笔触颜色透明度。

圆形 circle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
 
// cx 和 cy 属性定义圆点的x 和 y坐标。
// r 属性定义圆的半径。

椭圆 ellipse

直线 line

多边形 polygon

曲线 polyline

文本 text