SVG基础知识大全1.SVG简介SVG只是文本，因此可以使用GZip对其进行有效压缩。2.SVG和Canv

stroke-dasharray为一个参数时：其实是表示虚线长度和每段虚线之间的间距如：stroke-dasharray='10'表示：虚线长10，间距10，然后重复虚线长10，间距10

两个参数或者多个参数时：一个表示长度，一个表示间距如：stroke-dasharray='10,5'表示：虚线长10，间距5，然后重复虚线长10，间距5如：stroke-dasharray='20,10,5'表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环

属性如下

1、椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的

2、椭圆其实就是在圆的基础上增加了维度的半径

直线:描述2个点定义一条直线

折现:是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中

属性

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂

M=moveto

Mxy移动到指定坐标，xy分别为x轴和y轴的坐标点，类似画笔的起点。

L=lineto

Lxy在初始位置（M画的起点）和xy确定的坐标画一条线。两点一线，直线，绘图中很常见的方式。

H=horizontallineto

Hx沿着x轴移动一段位置

V=verticallineto

Vy沿着y轴移动一段位置

C=curveto

Cx1y1x2y2xy三次贝塞尔曲线

S=smoothcurveto

Sx2y2xy简化的贝塞尔曲线

1.如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。

2.如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

Q=quadraticBéziercurve

Qx1y1xy二次贝塞尔曲线Q只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

T=smoothquadraticBéziercurveto

Q命令的简写命令。与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。

1.T命令前面必须是一个Q命令，或者是另一个T命令

2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线

A=ellipticalArc

Arx,ryx-axis-rotationlarge-arc-flagsweep-flagx,yrx弧的半长轴长度ry弧的半短轴长度x-axis-rotation是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针旋转角度。large-arc-flag为1表示大角度弧线，0表示小角度弧线sweep-flag为1表示从起点到终点弧线绕中心顺时针方向，0表示逆时针方向。xy是终点坐标。

Z=closepath

从当前位置到起点画一条直线闭合。

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

Mxyor

mdxdy4.7.3曲线命令绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在Inkscape、Illustrator或者Photoshop中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份Wikipedia的文档。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。

//创建一个具有指定的命名空间URI和限定名称的元素//要创建一个元素而不指定命名空间URI，请使用createElement方法。letelement=document.createElementNS(namespaceURI,name[,options]);参数

字符串值，可为此元素节点规定其名称。

一个可选的包含单个属性的ElementCreationOptions对象，其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本，一些浏览器允许您在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。

返回值

element.appendChild(childElement)5.3设置/获取属性element.setAttribute(name,value)element.getAttribute(name)6.简单的SVG编辑器7.在线SVG压缩和转义工具8.SVGSprites还原与管理的在线工具9.验证SVG10.SVG的世界:视野、视窗的概念视窗：是浏览器渲染出来的一个区域

视野：是SVG文件编写者定义的多大的视野观察世界

SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。

基本有下面这些定义颜色的方式：

1、颜色名字：直接使用颜色名字red,blue,black…

2.rgba/rgb值：这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。

3.十六进制值：用十六进制定义的颜色，例如#ffffff。

4.渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，径向渐变。

5、图案填充：使用自定义的图案作为填充色。

这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过CSS来指定他们的值

1、SVG允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。

2、这样做可以增加SVG内容的易读性和可访问性。

1、use元素在SVG文档内取得目标节点，并在别的地方复制它们。

2、use元素还可以跨SVG调用

这里，两个use元素使用的是同一个g元素（组合），从而实现了图形的重复调用功能。

紧接着上面的SVG复制调用的例子

1、g是group（分组）的缩写。

require.context有三个参数：

2、在src目录下创建icons文件及子文件svg和index.js并配置从svg文件夹中读取svg文件

svg-sprite-loader是Webpack加载器，用于创建SVG精灵，可以实现自己的icon组件

它的工作原理是:利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol.