SVG入门

Posted 2020-10-04 学如逆水行舟，不进则退。

SVG是什么？

SVG（ SCalabel Vector Graphics）的意思是缩放矢量图形。
1998年，万维网联盟成立工作组，研发了一种通过XML来表现矢量图形的技术，即SVG。所有SVG继承了XML的良好兼容和矢量图形的优点。
良好兼容性:
1、使用<embed>或者<object>元素来显示基本的SVG图形
2、使用<img>来显示SVG图形
3、将SVG图形用作CSS背景图片
4、直接在html文档使用svg标签（需要HTML5支持） 5、对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效。
6、对SVG对象使用类似Phoneshop的效果，包括模糊和色彩处理
7、SVG动画
8、使用SVG格式字体

矢量图形优点：
计算机上主要两种表现图形，栅格图形 和矢量图形 。
栅格图形是用像素的矩阵队列来表示，每一个像素代表一个RGB颜色值或者是一个指向颜色列表的索引，通常以一种压缩格式来存储（如JPEG、GIF、PNG等），显示时只要解压处理即可

为什么要使用SVG？

1. 首先，SVG也是一种XML文件，继承了XML良好的兼容性。

2. 然后，虽然栅格图片使用起来更加容易和方便，但是我们缩放图片时，栅格图片可能产生失真，而矢量图片不会产生失真。

3. 最后，canvas绘制出的图片其实就是栅格图片，而且其绘制出的文字是属于图像一部分的，是无法被搜索引擎获取的，但是SVG上的文本却是可以被搜索的。

SVG如何引入？

两种方式：

1. 内联，直接将SVG标签写入html文档中。（当然需要HTML5的支持）

2. 外部引入，只要有三种方式。

   • 通过<embed>、<object>来引入页面

   • 通过img的src

   • 通过backgroud的url

SVG基础用法

首先，是一个svg标签，上边有两个属性width和height，设定svg图片的宽高尺寸

<svg width=“500px” height=“500px”></svg>

然后，在svg标签下添加其他所需标签即可
简单图形的绘制：直线、矩形、圆形、椭圆、折线、多边形(不少于三个边)、文本等等
默认单位为px

1. 直线：
   属性分别为直线起始点坐标和终点坐标

<line x1="10" y1="10" x2="20" y2=“20”></line>

2. 矩形：
   这些属性分别为矩形左上角坐标，矩形宽高，圆角半径

<rect x="50" y="50" width="100" height="100" rx="10" ry="20"></rect>

3. 圆形：
   属性分别为半径和圆心坐标

<circle r="50" cx="220" cy="100"></circle>

4. 椭圆：
   属性分别为x方向轴长和y方向轴长，然后是椭圆的圆心坐标

<ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>

5. 折线：
   属性很简单，就是一系列坐标，按照写入顺序将这些坐标用直线连接即可

<polyline points="60 50, 75 35, 100 50, 125 35, 150 50, 175 35, 190 50"></polyline>

6. 多边形：
   创建不少于三个边的多边形，所以points属性中添加坐标数目不能少于三个,坐标表示多边形每个角的坐标
   如果最后一个坐标和第一个坐标不同，会自动闭合，但自动闭合的线是没有线条勾勒痕迹的。

<polygon points="220 100, 300 210, 170 250, 123 234" />

7. 文本：
   属性为文本距离左边界和右边界的距离

<text x="125" y="220">hello,world</text>

最后，图片的一些样式我们向正常标签添加即可，可以行间，可以内部，也可以外部等等。
最基本是这三个样式，stroke设置线条颜色，stroke-width设置线条宽度，fill设置填充颜色

SVG其他一些复杂用法

svg标签上有个属性viewBox，不设置的话和svg设置宽高一致，相当于给svg元素建立了一套新坐标。然后我们设置添加直线等都是根据viewBox的坐标来设置，在绘制时是和高宽等比例缩放来实现显示。

 <svg width="500px" height="500px" viewBox="0, 0, 50, 50">
        <line x1="20" y1="20" x2="40" y2="20" style="stroke: #000;stroke-width: 3px;"></line>
    </svg>

 

路径path标签：

path支持的指令：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径 （不区分大小写）
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY): 光滑三次贝塞尔曲线 Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：光滑二次贝塞尔曲线,映射

这些指令的一些注意：
坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系 可以指定一些负数值作为命令的参数，负角度是逆时针，绝对x、y坐标将视为负坐标，而负相对x值向左移，负相对y值向右移。 指令和数据间的空格可以省略
同一指令出现多次可以只用一个

1. M指令和L指令、m指令和l指令 M/m是移动到其指定坐标，而L/l是从开始处画一条直线到其指定坐标，而这些指令都放到path标签的d属性中，如下代码就是一条从(10,10)到(20,10)的直线
   两套指令基本功能是差不多的，差别在于大M、大L指令的坐标都是绝对的，而小m、小l指令的坐标都是相对于绘制过程中上一个坐标的，也就是在上一个坐标的基础上进行坐标偏移(注意两套指令的第一个坐标都是相对整个svg的绝对坐标)。
   以下两个path等价，但写法却不同

<path d = "M 10 10 L 20 10" />
    <path d = "m 10 10 l 10 0" />

2. H和V指令

<path d="M20 20 H 90 V 90 H 20 L 20 20" />

3. A指令

弧线属性参数有7个，分别为rx、ry、x-axis-rotation、large-arc-flag、sweep-flag、x、y
rx：圆弧的x轴半径
ry：圆弧的y轴半径
x-axis-rotatiion：圆弧相对x轴的旋转角度，默认是顺时针，可以设置负值
large-arc-flag：圆弧是大圆弧还是小圆弧，1大圆弧，0小圆弧
sweep-flag：从起点到终点是顺时针还是逆时针，1顺时针，0逆时针
x，y表示终点坐标

 <path d="M 100 100 A 100 100 0 1 1 100 100"></path>

4. Z命令

不区分大小写，自动连接起始点和终点，自动闭合

5. Q和T指令、C和S指令

**什么是贝塞尔曲线？**我们只要用到二次和三次的，看下图
一次贝塞尔曲线

二次贝塞尔曲线

三次贝塞尔曲线

四次贝塞尔曲线

五次贝塞尔曲线

如何绘制贝塞尔曲线？
Q指令：二次贝塞尔曲线
M x0 y0 Q x1 y1 x2 y2
x0 y0是起始点，x1 y1是控制点（控制曲线弧度），x2 y2是终点

T指令：二次贝塞尔曲线光滑延伸
M x0 y0 Q x1 y1 x2 y2 T x4 y4
x0 y0是起始点，x1 y1是控制点，x2 y2是终点，x4 y4是二次贝塞尔曲线光滑延伸终点
（x3 y3是延伸曲线控制点，由x2 y2通过x3 y3映射而来，如图）

C指令：三次贝塞尔曲线
M x0 y0 C x1 y1 x2 y2 x3 y3
x0 y0是起始点，x1 y1是第一控制点，x2 y2是第二控制点，x3 y3是终点

S指令：三次贝塞尔无限光滑延伸
M x0 y0 C x1 y1 x2 y2 x3 y3 S x5 y5 x y6
x0 y0是起始点，x1 y1是第一控制点，x2 y2是第二控制点，x3 y3是终点，x5 y5是延伸曲线第二控制点，x6 y6是延伸曲线终点
（x4 y4是延伸曲线第一控制点，由x2 y2通过x3 y3映射而来，如图）

下面是一个二次贝塞尔曲线和三次贝塞尔曲线的小demo：

 <svg width="500px" height="400px" style="border: 1px solid #ddd;">
        <text x="100" y="300" style="stroke: #f40;">二次贝塞尔曲线（Q、T）</text>
        <path d="M 50 200 Q 150 300 250 200 T 450 200" style="stroke: #f40;"></path>
        <text x="100" y="100" style="stroke: blue;">三次贝塞尔曲线（C、S）</text>      
        <path d="M 50 200 C 100 100 150 100 250 200 S 400 300 450 200" style="stroke:blue"></path>
    </svg>

 

svg上边的三个属性viewport、viewBox、preserveAspectRatio

viewport: 表示SVG可见区域的大小，即绘制的图形是在此区域呈现，svg标签中width和height属性设置的就是viewport，如果值为纯数字，则其单位默认为px

viewBox:
viewBox可以理解为新建的一套坐标系统，该下的图形都必须按照此坐标系统来绘制。但这样很难理解。
所以我们可以从另一个角度来理解，那就是viewBox在画布中划了一个矩形盒子，然后将划的矩形盒子尽量放大以铺满画布,类似background-size中的contain属性，不会溢出裁剪。
针对此特点，我们可以用viewBox来截取原图的部分图片，然后放大铺满整个画布显示。

preserveAspectRatio:
该属性作用对象是viewBox， 其值是由两个参数构成。
第一个参数是一个组合，表示viewBox是如何与viewprt对齐的
xMin xMid xMax -> x轴 左中右对齐
yMin yMid yMax -> y轴 上中下对齐
第二个参数表示viewBox如何填充viewport的
meet 保持纵横比缩放viewBox适应biewport
slice 保持纵横比同时比例小的方向填满viewport
none 扭曲纵横比以适应viewport

SVG其他一些属性

由以上大家都知道了stroke、stroke-width和fill分别设置的是勾勒线条颜色、勾勒线条宽度、填充颜色。
需要注意的是stroke-width的值可以是百分比，即相对于当前视图画布的width和height中较大值来计算的。
除了这些基本属性还有其他几个属性，那就是stroke-opacity、fill-opacity、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-dasharray、stroke-dashoffset

stroke-opacity和fill-opacity
顾名思义，stroke-opacity和fill-opacity分别设置的是勾勒线条和填充的透明度，值从0~1,0代表完全透明，1代表不透明

stroke-linecap
设置线条首尾样式有三个值butt、round、square，如下图

stroke-linejoin 设置两个线段之间的衔接样式，主要用在折线的拐角处，有三个值miter、round、bevel，如下图

stroke-miterlimit
如果两条线交汇在一起形成一个尖角，而且属性stroke-linejoin指定了miter，斜接有可能扩展到远远超过出路径轮廓线的线宽。
属性stroke-miterlimit对斜接长度（miterLength）和stroke-width的比率强加了一个极限。当极限到达时，交汇处由斜接miter变成倒角bevel。
斜接长度指的是斜接的外尖角和内夹角之间的距离
stroke-miterlimit的值为纯数字，必须大于等于1(默认大小为4)，当比率大于设定的值则stroke-linejoin则由miter变为bevel

stroke-dasharray
用来表示设置虚线描边。
其有两个值，分别表示每条划线的长度以及划线之间的空格的大小。

stroke-dahoffset
用来设置虚线的起始偏移，可以设置百分比、具体长度、inherit

svg动画

针对此部分放到另一个页面去写,感兴趣请猛戳这里

参考来源：

1. http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

2. http://justcoding.iteye.com/blog/2226354