SVG基础教程(超级详细)
1、内置图形:
rect(矩形) circle(圆) ellipse(椭圆) line(直线) polyline(折线) polygon(多边形) path(路径) text(文本) image(图形) use(复制元素)
2、内置图形的html属性或(css样式):
fill(填充颜色) fill-opacity(填充透明度) stroke(边框颜色) stroke-width(边框宽度) stroke-opacity(边框透明度) stroke-dasharray(建立虚线) transform(变换) filter(滤镜)(url[#滤镜id)]
3、基本元素用法
一、矩形
基本用法css
<rect x="0" y="0" width="100" height="100" fill="#f06"/> <!--x表示横坐标，y表示纵坐标，width表示宽，height表示高-->
扩展用法html
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
<rect x="50" y="20" width="150" height="150"
fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>
二、圆
基本用法react
<circle cx="100" cy="50" r="100" fil='#f06'/> <!-- cx表示圆心横坐标，cy表示圆心纵坐标，r表示半径 -->
扩展用法jquery
<circle cx="100" cy="50" r="40"
style="stroke:blue;stroke-width:10;fill:pink"/>
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"/>
三、椭圆
基本用法web
<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/> <!-- cx表示圆心横坐标，cy表示圆心纵坐标，rx表示横向半径，ry表示纵向半径 -->
扩展用法svg
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
<ellipse cx="300" cy="80" rx="100" ry="50"
fill="pink" stroke="red" stroke-width="2"/>
四、直线
基本用法动画
<line x1="0" y1="100" x2="100" y2="0"/> <!-- x1起点横坐标，y1表示起点纵坐标，x2表示终点横坐标，y2表示终点纵坐标 -->
扩展用法url
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<line x1="0" y1="0" x2="200" y2="200"
stroke="red" stroke-width="10"/>
五、多边形
基本用法spa
<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/> <!-- 200,10为第一个点 250,190为第二个点 160,210为第三个点 -->
扩展坐标3d
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
<polygon points="200,10 250,190 160,210"
fill="red" stroke="blue" stroke-width="1" />
第一个点和最后一个点会链接起来，造成闭合的图形
六、折线
基本用法
<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
扩展用法
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:none;stroke:red;stroke-width:4" />
<!--此处将fill设置为none，能够仅仅画曲线，而若是fill有值，则会造成由曲线围城的多边形-->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:blue;stroke:red;stroke-width:4" />
第一个点不会和最后一个点连起来，不会闭合
4、图形元素用法
一、路径
路径是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, 则表示坐标位置是相对位置。
基本用法
<path d="M150 0 L75 200 L225 200 Z" /> <!-- d属性中包含全部路径的点，最后起点和终点链接起来造成闭合图形 -->
扩展用法
<path d="M150 0 L75 200 L225 200 Z"
fill="red" stroke="blue" stroke-width="10"/>
1.一、贝塞尔曲线(CSQT简称“厕所切图”)
(1)、三次贝塞尔曲线
Cx1 y1, x2 y2, x y
x1,y1 和x2，y2分别为控制点1和2，而x，y为曲线上的关键点
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(2)、光滑三次贝塞尔曲线
Sx2 y2, x y
S指令跟在C指令或S指令后面补刀，它会自动在C、S基础上生成一个对称点，因此S指令只须要两个点就能够。
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2px;"/> <path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120 S380 150, 450 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/> <path d="M20 80 S80 150, 150 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(3)、二次贝塞尔曲线
Qx1 y1, x y
(x1,y1)是控制点，(x,y)表示的是曲线的终点。
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 80 Q90 140, 130 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(4)、光滑二次贝塞尔曲线
Tx y
T指令和S指令相似，是给Q、T指令补刀的，T指令只有一个曲线终点，没有控制点(由Q的对称点自动生成)；
也能够单独使用，当单独使用时，是一条直线；
<path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2px;"/> <path d="M20 80 T350 140 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
1.二、圆弧
A rx ry x-deg large-arc sweep-flag x y
rx ry表示x轴半径和y轴半径，x-deg表示x轴旋转角度，large-arc表示大于180度仍是小于180度(0为小，1为大)，sweep-flag表示弧线方向(0为沿逆时针，1为沿顺时针)，x y为最终坐标。
<path d="M80 80 A45 45, 0, 0, 0, 125 125" fill="green" />
二、文本
基本用法
<text x="10" y="15">I love SVG</text>
扩展用法
<text x="0" y="15"
fill="red" transform="rotate(30 20,40)">I love SVG</text>
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
i LOVE d3
</text>
<!-- dx，dy表示平移的距离 -->
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I LOVE <tspan fill="red">D3</tspan>
</text>
<!-- 使用tspan对文本中的部分特殊定义 -->
沿path方向排列文本textPath
<path id="wavyPath" d="M75,100 a50,25 0 1,0 50,25" fill="none" />
<text x="50" y="50" font-size="14">
<textPath xlink:href="#wavyPath">
Text travels along any path that you define for it.
</textPath>
</text>
三、image图像
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="200" width="300"/>
x表示图像左上角在水平方向的位移，
y表示图像作商检在竖直方向的位移，
height，width分别为image的高度和宽度。
注意：默认图像不会缩放，即便定义了height，width，也不会缩放铺满剩余区域，
若是要控制image的缩放，须要设置preserveAspectRatio值。
preserveAspectRatio="<align> [<meetOrSlice>]"
-
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，表示水平上，放在中间，竖直上，放在开头。
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="0"
y="0"
height="200"
width="300"
preserveAspectRatio="xMidYMin meet"/>
四、use
该<use>元素从SVG文档中获取节点，并在其余位置复制它们。
当use复制其余元素后，还能对复制的元素进行属性的覆盖。
x, y, width, height，href这几个属性，无论源 元素是否有设置，均可以覆盖。
而其余属性，若是源 元素已经设置，则没法覆盖，若是没有设置，则能够再use上设置。
<svg viewBox="0 0 30 10"
xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle"
cx="5"
cy="5"
r="4"
stroke="blue" />
<use href="#myCircle"
x="10"
fill="blue" />
<use href="#myCircle"
x="20"
fill="white"
stroke="red" />
</svg>
能够看到设置的x属性覆盖成功了，第二个use的fill也设置成功了，可是第三个use 的stroke没有变成红色，由于circle已经指定了，因此没法覆盖。
5、容器元素用法
一、连接元素
svg的连接元素 a和html的连接元素a很类似，都是指向一个超连接。
在svg的a元素中，能够包含任何的形状
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- A link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35"/>
</a>
<!-- A link around a text -->
<a href="/docs/Web/SVG/Element/text">
<text x="50" y="90" text-anchor="middle">
<circle>
</text>
</a>
</svg>
注意： 在获取svg的a元素时，为了区分html的a元素，要加命名空间
//css
@namespace svg url(http://www.w3.org/2000/svg);
svg|a {}
二、<defs>
defs元素一般用来存储在后续将会用到的图像，其 defs中的图像，不会直接呈现，必须在后续经过其余元素 引用才能呈现。
至关于在js中，封装的一个方法，供其余地方调用。 在这里，是封装了一段html，供后续的html调用。
通常状况下，defs中用来定义过滤，渐变，填充(pattern)等效果。
<svg viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- 定义一个线性渐变，外部的全部元素均可以引用这个效果 -->
<linearGradient id="myGradient"
gradientTransform="rotate(90)">
<stop offset="20%"
stop-color="gold" />
<stop offset="90%"
stop-color="red" />
</linearGradient>
</defs>
<!-- 在defs的外部经过使用url(defs中的id值) 来引用defs中定义的图形 -->
<circle id="myCircle"
cx="0"
cy="0"
r="5"
fill="url('#myGradient')" />
</svg>
三、<g>
<g>元素是一个用于对其余SVG元素进行分组的容器。
在<g>元素上设置的属性和变换，会统一影响g分组中的全部元素，会把g元素当成一个总体处理。
和前面的defs相似，只是<g>中的元素会直接做为一个总体呈现，能够不须要引用就能呈现，固然也能被use复制。
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg">
<!-- 将g中的元素做为一个总体，统一设置stroke，transform等 -->
<g id="myG"
stroke="green"
transform="rotate(20 20,40)"
stroke-width="5">
<circle cx="40"
cy="40"
r="25" />
<circle cx="60"
cy="60"
r="25" />
</g>
<!-- 使用use复制g，而且覆盖fill属性 -->
<use href="#myG"
x="100"
fill="blue" />
</svg>
四、<mask>
mask元素定义了一个alpha通道(我也不懂，大概懂PS的大神才知道)，用于将当前对象合成到背景中，在其余元素上经过mask属性来引用。
其自己不会呈现，必须被其余元素引用才能呈现。
<svg viewBox="-10 -10 120 120">
<!-- 定义一个mask 遮罩 -->
<mask id="myMask" x="0" y="0">
<rect x="0"
y="0"
width="100"
height="100"
fill="red" />
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="blue" />
</mask>
<polygon points="-10,110 110,110 110,-10"
fill="orange" />
<!-- 经过mask属性引用 mask元素 -->
<circle cx="50"
cy="50"
r="50"
mask="url(#myMask)" />
</svg>
不定义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此值表示<mask>元素内的全部坐标都是指建立蒙版时定义的用户坐标系。
objectBoundingBox此值指示<mask>元素内的全部坐标都相对于应用蒙版的元素的边界框。
五、<pattern>
pattern元素定义了一个填充对象，这个对象，能够在其寄宿元素内重复 平铺 覆盖以占满寄宿元素(谁引用pattern，谁就是寄宿元素)。
通常状况下，元素经过自身属性的fill或者 stroke来引用pattern元素。
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
pattern里面不只可使用图案，还能放置图片<image>元素。可是无论放置哪一个。里面的图形，都会保持图形自身的长宽比平铺，并不会按照pattern定义的width，height，100%占满 pattern。
若是不能100%占满 pattern，那么当 pattern在寄宿元素上，重复平铺时，每一个pattern之间看起来就会有间隔。
//宽度变为20%
<pattern id="star"
width="20%"
height="10%"
viewBox="0 0 10 10">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
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 id="star"
width="20%"
height="10%"
viewBox="0 0 10 10"
preserveAspectRatio="none">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
这样pattern中的元素会在 pattern定义的20%,10%的宽高上平铺。
除了svg以外，css中的clip-path也能够经过裁剪的方式作圆、椭圆的剪切。
clip-path: inset(40px 25px 20px 0px); //距上为40， 距离右边为25，距下面为20，距离左边为0的矩形 clip-path: circle(200px at 0px 0px); //以0 0 为圆心，200为半径的圆 clip-path: ellipse(100px 50px at 50% 50%); //x轴半径为100， y轴半径为50，圆心为50% 50%的椭圆 clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%); //多边形，每个为一个顶点
六、<marker>
marker元素定义了用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或 多点标记 的图形。
在元素上使用 marker-start, marker-mid, 和 marker-end 属性，来引用marker元素。
marker有以下属性:
- markerHeight: 定义marker元素的高度
- markerWidth: 定义marker元素的宽度
- markerUnits: 该属性为markerWidth、markerHeight以及marker的内容 定义了坐标系统。 userSpaceOnUse|strokeWidth
- orient：定义marker相对于寄宿元素的方向，值有auto|auto start-reverse|<angle>。
- refX: marker元素相对于X轴的偏移。和正常坐标系相反，正值向左，负值向右。
- refY：marker元素相对于Y轴的偏移。和正常坐标系相反，正值向上，负值向下。
- viewBox： 当前marker片断定义SVG视图端口的边界。
- preserveAspectRatio：定义了若是marker片断嵌入到具备不一样纵横比的容器中，则必须如何对其进行变形。
注意：
若是一个元素定义了marker-start，那么就在开头的位置添加marker，
若是一个元素定义了marker-mid，那么就在全部中间位置添加marker，
若是一个元素定义了marker-end，那么就在结尾位置添加marker。
能够定义多个，那么也就添加多个。
<svg viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 定义一个箭头标记-->
<marker id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="16"
markerHeight="6"
markerUnits="strokeWidth"
preserveAspectRatio="none"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- 定义一个点标记 -->
<marker id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5"
cy="5"
r="5"
fill="red" />
</marker>
</defs>
<!-- 在开头和结尾位置添加 marker，开头为10,10 结尾为90，90 -->
<polyline points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- 在开头，结尾和中间 位置添加 marker，开头为15,80 结尾为85,15，其他全为中间 -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
七、<symbol>
定义一个模板元素，自己是不会呈现的，只有使用use引用后，才会呈现出来。
<svg viewBox="0 0 100 100"
width="300"
height="300"
xmlns="http://www.w3.org/2000/svg">
<!-- symbol definition NEVER draw -->
<symbol id="sym01"
viewBox="0 0 150 110">
<circle cx="50"
cy="50"
r="40"
stroke-width="8"
stroke="red"
fill="red" />
<circle cx="90"
cy="60"
r="40"
stroke-width="8"
stroke="green"
fill="white" />
</symbol>
<!-- actual drawing by "use" element -->
<use xlink:href="#sym01"
x="0"
y="0"
width="100"
height="50" />
</svg>
只呈现出来了use元素，symbol元素自己没有呈现。
八、<svg>
svg所定义的片断， 无论在独立的svg文件中，仍是嵌入html中，都拥有独立的视口和坐标系统。
<svg xmlns="http://www.w3.org/2000/svg"
width="150"
height="100"
viewBox="0 0 3 2">
<rect width="1"
height="2"
x="0"
fill="#008d46" />
<rect width="1"
height="2"
x="1"
fill="#ffffff" />
<rect width="1"
height="2"
x="2"
fill="#d2232c" />
</svg>
上面的svg为一幅 意大利国旗
svg元素有以下专有属性:
- version：指明 SVG 文档遵循规范， 值为1.0 | 1.1
- x：起始 横坐标
- y：起始 纵坐标
- width：svg元素的宽度
- height：svg元素的高度
- preserveAspectRatio：是否强制进行统一缩放.
- viewBox：容许指定一个给定的一组图形伸展以适应特定的容器元素。
6、视口 viewbox
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height
下面的不设置 viewbox的情形:
<svg x="0" y="0" width="500" height="60"
xmlns="http://www.w3.org/2000/svg">
<rect x="0"
y="0"
width="100"
height="150" />
</svg>
矩形起始于 svg的（0,0）位置，长度为100px，宽度为150px
当设置viewbo后
<svg viewBox="-5 -5 100 150" width="500" height="600"
xmlns="http://www.w3.org/2000/svg">
<rect x="0"
y="0"
width="100"
height="150" />
</svg>
能够看到，不只变大了，并且还向右下角 平移了。
为何呢？
咱们能够看到 viewBox的值为"-5 -5 100 150"，（-5 -5）分别表示 最小的x和最小的y，也就是说，左上角本来的（0,0）如今等价于(-5,-5), 那么若是想要时rect 仍是在原来的左上角，那么<rect x="-5" y="-5" width="100" height="150" />才能够，而若是设置为
<rect x="0" y="0" width="100" height="150" />就会向右向下平移5px。
而后咱们看到viewbox后两个是100 150，分别表示 svg的宽度和高度，即100等同于svg定义的宽度500,150等同于svg定义的高度600，那么在svg容器里面的rect 上设置 width为100，等同于500，高为150，等同于600，这样会有个问题，就是原本rect的长宽比为100:150，而经过viewbox设置后，长宽比会变化， 因此svg默认 即便viewbox宽度比变化了，可是viewbox容器里的元素的长宽比不会变化，会以缩放较小的那个为准。
因此咱们能够看到 viewbox至关于 一个比例尺，对本来的svg的位置和宽高 作了相同比例的缩放。
一共有下面的5个元素能够设置 viewbox:
<marker>, <pattern>, <svg>, <symbol>, 和 <view>
与viewbox相关的另外一个属性是preserveAspectRatio。
若是说viewbox是控制容器里面元素等比缩放的比例尺的话， preserveAspectRatio就是用来指定 是否须要等比缩放，若是不等比缩放，是否须要整个填充。
preserveAspectRatio：<align> [<meetOrSlice>]
除了 <image> 元素以外，其余元素使用preserveAspectRatio必须在同一元素上为 viewBox 提供的值。若是没有提供属性 viewBox ，则忽略了preserveAspectRatio。
7、渐变
分为线形渐变和径向渐变，渐变自己不会渲染，必须经过具体元素的fill引用才生效
<svg width="500"
height="600"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%">
<!--x1,y1 x2,y2用来定义径向渐变的方向，此处为向右-->
<stop offset="0%"
stop-color="blue" />
<stop offset="100%"
stop-color="red" />
</linearGradient>
<radialGradient id="irisGradient">
<stop offset="25%"
stop-color="green" />
<stop offset="100%"
stop-color="dodgerblue" />
</radialGradient>
</defs>
<rect fill="url(#myGradient)"
x1="10"
y1="10"
width="300"
height="100" />
</svg>
8、滤镜
<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>
比较复杂，用的也比较少，使用时能够查找文档
svg 滤镜
9、动画和交互性
动画被弃用，请使用css animations或者web animations代替
10、事件
最经常使用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="120" height="120" viewBox="0 0 120 120"
version="1.1">
<polygon points="60,30 90,90 30,90" id="svg_polygon">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
</polygon>
</svg>
<script>
//svg_hexagon为path的id
document.getElementById("svg_polygon").addEventListener("click", function() {
//todo
});
</script>
11、svg的css样式
因为在html中，有a元素，因此这就致使了，在css中，使用a时，没法判断是获取的html的a，仍是svg的a，因此 最好的方式是使用命名空间，来限定。
<svg width="300"
height="300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- A link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50"
class="my-circle"
cy="40"
r="35" />
</a>
<!-- A link around a text -->
<a href="/docs/Web/SVG/Element/text">
<text x="50"
y="90"
text-anchor="middle">
<circle>
</text>
</a>
</svg>
@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;
}
12、好用的svg库
一、svg.js
svg.js更加接近原生svg语法，能够直观的操做svg。svg.js更快，兼容性好，上手更方便。
二、Snap.svg
Snap.svg更接近jquery的语法，来操做svg。Snap.svg更全，功能丰富。