SVG（可缩放矢量图形）基本图形绘制方法与path路径命令

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

SVG（Scalable Vector Graphics）可缩放矢量图形
用于描述二维矢量图形的一种图形格式
很早之前SVG就出现了
相比于canvas，它更适合作一些小图标icon等等
HTML5支持内联SVG
它的优点如下：

• 可伸缩
• 可通过文本编辑器创建和修改
• 可被搜索、索引、脚本化或压缩
• 可在任何的分辨率下被高质量地打印
• 可在图像质量不下降的情况下被放大

canvas是js动态绘图，而svg是XML文档来描述绘图
svg-icon网址：传送门
下面我们来看一下如何使用svg绘图
#创建svg
和canvas类似，首先需要在html文档中创建标签

<svg width=300 height=300></svg>

也可以指定width与height属性
（canvas与svg如果不指定宽高，默认300×150）
不过它还有另外一种使用的形式（viewbox属性），可以看看我的另一篇文章：传送门
接下来的图形绘制和canvas很像了，就多解释了
区别是以XML标签的形式写在svg标签内部
而且为svg的css样式指定宽高不会使它等比缩放
#基本图形绘制
##直线

<svg width=300 height=300>
    <line x1=100 y1=100 x2=200 y2=200></line>
</svg>

x1,y1 起始坐标
x2,y2 终点坐标

还需要指定css样式才能够画出来

line {
   
    stroke: #000;
}

（样式属性参考canvas环境对象中的属性）

##矩形

<svg width=300 height=300>
    <rect x=100 y=100 width=100 height=100 rx=10 ry=10></rect>
</svg>

x,y 矩形起始坐标
width,height 矩形宽高
rx,ry 矩形圆角

rect {
   
    stroke: #000;
    fill: transparent;