svg 画图

一般的写法：（上总结？）

蓝色为变量

<svg x="x" y="y" width="k" height="g">  // 为整个图形选好大致位置  宽和高最好不要，超出会隐藏 

 <rect x="x" y="y" width="k" height="g" class="background" fill="color"></rect>

  //  矩形  xykg  是一定要有的 颜色默认应该是黑

<line class="block"  stroke-width="sk"  x1="1768" y1="115" x2="1768" y2="500" stroke-dasharray="1,1" stroke="#771e1e"/>

//  直线  sk要有是先的粗细，stroke是线的颜色， stroke-dasharray：需要虚线就加这个属性 ， 是 x1y1  到 x2y2 的线 

<polygon

        points="0,0 20,0 10,10 "

        style="fill: HotPink"

      />

//多边形 一直加点可以一直做

</svg>

<circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>

//圆 cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)

r属性定义圆的半径

 下面是大致的属性：

fill="red",一般用来 给矩形 等  有面积的 取颜色

stroke-width="2"  线的宽度 也就是粗细

stroke:rgb(255,0,0); 线的颜色 

stroke-dasharray="5,5" 做虚线 的  一个是 线长 一个是 间隔 

SVG path 标签

直线命令

你可以用这个标签玩出花来 （不是真的花  是说会方便很多）有个前提 就是加上这个css，因为是只画线

 style="stroke: blue;fill:none;stroke-width: 5 "

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

大写 表示真正的原起点，小写表示相对定位  也就是小写字母前面那一个点作为0,0。

建议都用小写并全熟练使用 这样别人改一处就会崩  （坏笑）（我还没有熟练使用但是我推测是这样嘻嘻嘻）

 <path d="M 1,124 58,124 M 24,113 58,113 l  80,113" style="stroke: blue;fill:none;stroke-width: 5 !important;" class="line lineValue"></path>

M

基本上作为起点  可以代表重新画一条线 

M  0,0   10,10    代表从M开始 起一条线 从0,0点到 10,10点 

L 大写L

从真正的起点出发 

l 小写I

当前位置作为 0,0开始

M  0,0   10,10   l 10,10  代表  从10,10 点上的10,10   即 20,20

H
    绘制平行线

20,20 H50  是从原起点的x轴50  画出来的长度 可能不是50

20,20 h50  是从当前点开始计算x轴50  画出来的长度 一定是50

H50  可以贴着ta写    

V
    绘制垂直线

20,20  V50  是从原起点的y轴50  画出来的长度 可能不是50

20,20  v50  是从当前点开始计算y轴50  画出来的长度 一定是50

V50  可以贴着ta写    

Z
    从当前点画一条直线到路径的起点

参考链接

svg之path详解 - 简书 (jianshu.com)

参考：路径-SVG|MDN
参考：svg教程