之前我写过一篇【canvas绘画折线段】，其实实际使用中，svg绘画简单的曲线是最方便的。
比如大屏中使用，或者其他小特效使用
点赞 + 关注 + 收藏 = 学会了
一、什么是svg?
在学习 SVG 之前，首先要了解 位图 和 矢量图 的区别。
简单来说：
- 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果，png、jpg等图片也是位图。
- 矢量图：放大不会失真；使用 XML 描述图形。
那么 SVG 是什么呢？SVG 意为可缩放矢量图形（Scalable Vector Graphics）。它是矢量图的其中一种格式。它是用 XML 来描述图形的。
对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。
所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。
二、SVG标签基本结构
如下所示，是一个 SVG 文档结构：
<svg version="1.1" xmlns='http://wwww.w3.org/2000/svg' width='300' height='200' >
<title>测试</title>
<desc>这是一个描述</desc>
<!-- 在这里绘制图像 -->
<rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="115" font-size="16" text-anchor="middle" fill="white">svg测试文本</text>
</svg>
<svg>根元素以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间，version属性可定义所使用的 SVG 版本，<title>元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示，<desc>元素允许咱们为图像定义完整的描述信息，<rect>标签 用来创建一个矩形，通过fill属性 把背景颜色设为黄色。<circle>标签 用来创建一个圆。cx和cy属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径。 一个半径 80px 的绿色圆圈<circle>绘制在红色矩形的正中央 （向右偏移 150px，向下偏移115px）。stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，红色边框。fill属性设置形状内的颜色。我们把填充颜色设置为红色。
注意：所有的开启标签必须有关闭标签！
运行效果：
三、svg坐标系
SVG 网格坐标系统的特点如下所示：
- 以左上角为坐标系的原点，即 (0,0)。
- （向右）横向延伸为 X 轴正方向， x 坐标逐渐增大。
- （向下）纵向为 Y 轴正方向，y 坐标逐渐增大。
- 坐标以像素 px 为单位。
四、常见标签使用
1. 矩形 rect
<rect>标签可用来创建矩形，以及矩形的变种：
矩形：
<svg>
<rect
width="300" height="100"
stroke="red" stroke-width="4"
fill="yellow" />
</svg>
圆角矩形：
<svg>
<rect
x="50" y="20"
rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
2. 圆形 circle
<svg>
<circle
cx="100" cy="50"
r="40"
stroke="black"
stroke-width="2"
fill="red"/>
</svg>
3. 椭圆形 ellipse
<svg>
<ellipse
cx="300" cy="80"
rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
4. 直线 line
<svg>
<line
x1="0" y1="0"
x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
5. 多边形 polygon
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
polygon来自希腊。 “Poly” 意味 “many” ， “gon” 意味 “angle”.
如下代码可以生成一个三角形：
<svg height="400" width="400">
<polygon
points="0,0 200,200 0,400"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
6. 折线 polyline
注意需把fill设成none
<svg>
<polyline
points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
7. 路径 path
<path> 标签用于定义一个路径。
下面的命令可用于路径数据：
- 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 关闭路径
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
如下例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。（黑色三角形）
<svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
8. 文本 text
<svg>
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
9. Stroke 属性
所有stroke属性，可应用于任何种类的线条
- stroke 定义文本或元素轮廓颜色
- stroke-width 定义文本或元素轮廓厚度
- stroke-linecap 定义不同类型的开放路径的终结（线段终点的样式）
- stroke-dasharray 用于创建虚线
四、实践入门
弧线运动
如下代码定义了一个弧线运动：点击后触发小方块沿着曲线无限循环运动
<svg width="800" height="800">
<path d="M0 0 c0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
<rect x="0" y="0" width="40" height="40" fill="lightgreen">
<animateMotion
path="M0 0 c0 300 300 300 300 0"
dur="3"
begin="click"
retate="auto"
dur="3"
repeatCount="indefinite"
restart="auto">
<animateMotion/>
</rect>
</svg>
效果如下
未完待续…下次研究详细的动画，这次稍微入个门
https://www.jc2182.com/svg/svg-examples.html
https://blog.csdn.net/sunxiaobai1/article/details/122862625
