一、内置图形:
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)二、内置图形的html属性或(css样式):
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]三、基本元素用法
1、矩形
基本用法
扩展用法
2、圆
基本用法
扩展用法
3、椭圆
基本用法
扩展用法
4、直线
基本用法
扩展用法
5、多边形
基本用法
扩展坐标
第一个点和最后一个点会连接起来，形成闭合的图形
6、折线
基本用法
扩展用法
第一个点不会和最后一个点连起来，不会闭合
四、图形元素用法
1、路径
路径是svg中最强大的图形
路径是由一系列命令所组成。
命令 名称 参数
M moveto 移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto 垂直线到 y+
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)+
如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。
基本用法
扩展用法
1.1、贝塞尔曲线(CSQT简称“厕所切图”)
(1)、三次贝塞尔曲线
Cx1 y1, x2 y2, x yx1,y1 和x2，y2分别为控制点1和2，而x，y为曲线上的关键点
下面为曲线上的点随着时间的变化而变化的过程。
(2)、光滑三次贝塞尔曲线
Sx2 y2, x yS指令跟在C指令或S指令后面补刀，它会自动在C、S基础上生成一个对称点，所以S指令只需要两个点就可以。
(3)、二次贝塞尔曲线
Qx1 y1, x y(x1,y1)是控制点，(x,y)表示的是曲线的终点。
下面为曲线上的点随着时间的变化而变化的过程。
(4)、光滑二次贝塞尔曲线
Tx yT指令和S指令类似，是给Q、T指令补刀的，T指令只有一个曲线终点，没有控制点(由Q的对称点自动生成)；
也可以单独使用，当单独使用时，是一条直线；
1.2、圆弧
A rx ry x-deg large-arc sweep-flag x yrx ry表示x轴半径和y轴半径，x-deg表示x轴旋转角度，large-arc表示大于180度还是小于180度(0为小，1为大)，sweep-flag表示弧线方向(0为沿逆时针，1为沿顺时针)，x y为最终坐标。
2、文本
基本用法
I love SVG 扩展用法
I love SVG
I love SVG
i LOVE d3
I LOVE D3
沿path方向排列文本textPath
Text travels along any path that you define for it.
3、image图像
x表示图像左上角在水平方向的位移，
y表示图像做商检在竖直方向的位移，
height，width分别为image的高度和宽度。
注意：默认图像不会缩放，即使定义了height，width，也不会缩放铺满剩余区域，
如果要控制image的缩放，需要设置preserveAspectRatio值。
preserveAspectRatio="
-
meetOrSlice只有两个值：meet|slice， 默认meet
meet表示保留长宽比，image或者viewbox在定义的width和height区域都是可见的。 slice表示保留长宽比，但是整个 定义的width和height区域都由image覆盖，如下(很神奇，被拉直了，原图是折的)
-
align有一下值：none|xMinYMin|xMidYMin|xMaxYMin|...
none表示，图片避讳保持长宽比，直接按照100%，在image的width和height指定的区域铺满，
除none之外，其他的值都是表示在保持长宽比没有铺满时的放置位置的。如xMidYMin，表示水平上，放在中间，竖直上，放在开头。
4、use
该
当use复制其他元素后，还能对复制的元素进行属性的覆盖。
x, y, width, height，href这几个属性，不管源 元素是否有设置，都可以覆盖。
而其他属性，如果源 元素已经设置，则无法覆盖，如果没有设置，则可以再use上设置。
可以看到设置的x属性覆盖成功了，第二个use的fill也设置成功了，但是第三个use 的stroke没有变成红色，因为circle已经指定了，所以无法覆盖。
五、容器元素用法
1、链接元素
svg的链接元素 a和html的链接元素a很相似，都是指向一个超链接。
在svg的a元素中，可以包含任何的形状
注意： 在获取svg的a元素时，为了区分html的a元素，要加命名空间
//css
@namespace svg url(http://www.w3.org/2000/svg);
svg|a {}2、
defs元素通常用来存储在后续将会用到的图像，其 defs中的图像，不会直接呈现，必须在后续通过其他元素 引用才能呈现。
相当于在js中，封装的一个方法，供其他地方调用。 在这里，是封装了一段html，供后续的html调用。
一般情况下，defs中用来定义过滤，渐变，填充(pattern)等效果。
3、
在
和前面的defs类似，只是
4、
mask元素定义了一个alpha通道(我也不懂，大概懂PS的大神才知道)，用于将当前对象合成到背景中，在其他元素上通过mask属性来引用。
其本身不会呈现，必须被其他元素引用才能呈现。
不定义mask时这样
定义后这样
不可思议。。。
mask元素有以下属性
- x 此属性定义遮罩区域左上角的x轴坐标。
- y 此属性定义遮罩区域左上角的y轴坐标。
- width 此属性定义遮罩区域的宽度。
- height 此属性定义遮罩区域的高度。
- maskContentUnits： userSpaceOnUse|objectBoundingBox， 默认为userSpaceOnUse, 对mask中的内容定义坐标系类型。如上面的react中的x，y等属性
- maskUnits： userSpaceOnUse|objectBoundingBox， 默认为objectBoundingBox， 对mask本身定义坐标系类型。如mask上的x，y等
userSpaceOnUse此值表示
objectBoundingBox此值指示
5、
pattern元素定义了一个填充对象，这个对象，可以在其寄宿元素内重复 平铺 覆盖以占满寄宿元素(谁引用pattern，谁就是寄宿元素)。
一般情况下，元素通过自身属性的fill或者 stroke来引用pattern元素。
pattern里面不仅可以使用图案，还能放置图片
如果不能100%占满 pattern，那么当 pattern在寄宿元素上，重复平铺时，每个pattern之间看起来就会有间隔。
//宽度变为20%
pattern的属性
- x x坐标起始位置。
- y y坐标起始位置。
- width pattern的宽度。
- height pattern的高度。
- viewBox 定义pattern元素的的SVG视口的边界。
- preserveAspectRatio 定义当前元素指定的width，height与里面元素实际展示的尺寸的比例变换关系。
preserveAspectRatio决定的是当前元素定义的width，height属性和里面元素实际展示的关系。 默认里面的元素保持自身的长宽比，即使preserveAspectRatio所在元素的width，height超过了里面元素的实际宽，高。
如果为none，则表示里面的元素在水平、竖直方向上100% 占满pattern定义的width，height。
//设置preserveAspectRatio
这样pattern中的元素会在 pattern定义的20%,10%的宽高上平铺。
6、
marker元素定义了用于在给定的
在元素上使用 marker-start, marker-mid, 和 marker-end 属性，来引用marker元素。
marker有如下属性:
- markerHeight: 定义marker元素的高度
- markerWidth: 定义marker元素的宽度
- markerUnits: 该属性为markerWidth、markerHeight以及marker的内容 定义了坐标系统。 userSpaceOnUse|strokeWidth
- orient：定义marker相对于寄宿元素的方向，值有auto|auto start-reverse|
。 - refX: marker元素相对于X轴的偏移。和正常坐标系相反，正值向左，负值向右。
- refY：marker元素相对于Y轴的偏移。和正常坐标系相反，正值向上，负值向下。
- viewBox： 当前marker片段定义SVG视图端口的边界。
- preserveAspectRatio：定义了如果marker片段嵌入到具有不同纵横比的容器中，则必须如何对其进行变形。
注意：
如果一个元素定义了marker-start，那么就在开头的位置添加marker，
如果一个元素定义了marker-mid，那么就在所有中间位置添加marker，
如果一个元素定义了marker-end，那么就在结尾位置添加marker。
可以定义多个，那么也就添加多个。
7、
待补充
8、
viewbox
六、渐变
9、渐变
分为线形渐变和径向渐变
七、滤镜
九、动画和交互性
动画被弃用，请使用css animations或者web animations代替
十、事件
最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。
四、svg的css样式
由于在html中，有a元素，所以这就导致了，在css中，使用a时，无法判断是获取的html的a，还是svg的a，所以 最好的方式是使用命名空间，来限定。
@namespace svg url(http://www.w3.org/2000/svg); //svg为命名名称，可以自定义
//元素选择器
svg|a:link,
svg|a:visited {
cursor: pointer;
}
//表示只对svg下的a的 进行操作
svg|a text,
text svg|a {
fill: blue; /* Even for text, SVG uses fill over color */
text-decoration: underline;
}
svg|a:hover,
svg|a:active {
outline: dotted 1px blue;
}
//class选择器， 此处circle只有svg中才有这个元素，所以可以不用加命名空间
circle.my-circle {
stroke: #006600;
fill: #cc0000;
}五、好用的svg库
1、svg.js
svg.js更加接近原生svg语法，可以直观的操作svg。svg.js更快，兼容性好，上手更方便。
2、Snap.svg
Snap.svg更接近jquery的语法，来操作svg。Snap.svg更全，功能丰富。
参考文档: https://developer.mozilla.org...