前端提高篇(七十)：SVG基本使用、基本样式、路径path

SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG遵循的是xml的规范，与html5的使用有所区别
SVG绘制出来的是矢量图，放大之后不会失真
官方文档链接

应用场景：
1.图形（脑图）
2.图标、logo（矢量图）
3.动效

发展简史及支持情况
1.在2003年，SVG1.1被确立为W3C标准
2.firefox、IE9+、chrome、safari均支持

使用：
html：

<svg width='500px' height='500px' xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

js：

var char = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(char, 'svg');

SVG元素对象一般通过调用setAttribute()方法来设定属性值

基础元素：

<!-- 直线，需要设置stroke:someColor -->
<line x1='100' y1='100' x2='200' y2='100' stroke='red'></line>
<!-- 矩形，rx，ry是圆角 -->
<rect x='100' y='100' width='100' height='100' rx='20' ry='20'></rect>
<!-- 绿色的圆形 -->
<circle cx='100' cy='100' r='50' fill='green'></circle>
<!-- 椭圆，rx，ry为圆心坐标，cx，cy为半径，长短轴 -->
<ellipse rx='100' ry='50' cx='250' cy='100'></ellipse>
<!-- 多边形 -->
<polygon points='100 100,70 150,130 150'></polygon>
<!-- 折线 -->
<polyline points='0 100,100 35,200 150,300 75,400 150,500 20'></polyline>
<!-- 字体 -->
<text x='300' y='300'>学习</text>

元素的属性名是固定的，不可随意改动；但可以直接写在dom上，不用另外写在css文件里，或内部样式表，如fill，stroke，width，height等等
fill-opacity：填充透明度
stroke-opacity：描边透明度

1.默认画的元素都会填充成黑色，想改颜色用fill，但画直线时，没有可以填充的地方，显示不出来，所以需要单独设置stroke颜色才能看见

svg {
    border: 1px solid #000;
}
line {
    stroke: red;
}

<svg width='500' height='500' xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1='100' y1='100' x2='200' y2='100'></line>
</svg>

效果就是一条红色的线

2.线宽stroke-width是有写px的，不是相对大小
一个椭圆，以透明填充，描边用橘色，线宽20px：

ellipse {
    stroke: orange;
    fill: transparent;
    stroke-width: 20px;
}

3.画折线时，由于默认会填充，所以会把第一个点和最后一个点连起来，然后填充成黑色，就像多边形一样

<polyline points='0 100,100 35,200 150,300 75,400 150,500 20'></polyline>

把填充色改成透明色看看原来折线的样子

polyline {
    stroke: red;
    fill: transparent;
}

4.文字也能添加样式

text {
    stroke: red;
    font-size:20px;
    stroke-width:3px;
}

<text x='300' y='300'>学习</text>

基础样式
1.fill: transparent;
2.stroke: red;
3.stroke-width: 10px;
4.stroke-opacity/fill-opacity: 0.5;
5.stroke-linecap: butt/round/square;
6.stroke-linejoin: bevel/round/miter;

与canvas的类似

路径

path 元素用于定义一个路径。
d: 定义路径指令
下面的命令可用于路径数据：

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椭圆弧 A 70 120 0 1 1 150 200
Z = closepath关闭路径(连接起点和终点，不分大小写)
注意：以上所有命令均允许小写字母。大写表示绝对定位（对于svg），小写表示相对定位（相对前面那个路径）。

VvHh的使用

<path d='M 100 100 v 100 h 100'></path>

从svg的(100,100)处垂直走100，再水平走100，水平走的方向根据写的数值和大小写Hh来控制

如果写成：

<path d='M 100 100 V 100 H 100'></path>

就相当于还是一个点，画笔移动到svg(100,100)处，V代表svg垂直方向100处，还是这个点，H代表水平方向100处，也还是这个点，所以不会有画线，需要用小写的v和h

L使用：画多段直线：

<path d='M 100 100 L 200 100, 200 200,100 200,100 150'></path>

可以一直lineTo下去

有svg的在线编辑器，可以方便地画图形，然后保存成svg文件，在ide中打开，就能看到对应的path
在线编辑器
随便画了个图

保存文件，在浏览器打开，就是图示的这样，在vscode打开，是这样的：

已经写好了对应的svg元素及属性

二次贝塞尔曲线：
M到起始点，Q后面跟控制点，最后写终止点

<path d='M 100 100 Q 200 0 300 100'></path>

关于A指令的使用：
这里有一篇很赞的文章，给出了详细的解释

A指令是不指定椭圆圆心的，指定起点和终点，经过这两个点的椭圆有2个，弧有4段，
如果A指令的第4个参数为1，代表选择大弧，即图中的1或者4；
如果第4个参数为0，代表选择小弧，即图中的2或者3；
如果第5个参数为1，代表选择从起点到终点顺时针的弧1；
如果第5个参数为0，代表选择从起点到终点逆时针的弧4

A 70 120 0 1 1 150 200的图：

如果指定的起点和终点刚好在轴上，画出的圆只有1个，可选择的弧只有2段

如果设定了旋转角度，是旋转完椭圆，与起点终点匹对位置，然后旋转弧段，不是在未旋转时选好弧段再旋转

<path d='M 100 100 A 70 120 90 1 1 150 200'></path>

关于path，这里还有一篇很赞的文章，可以参考