实际工作中，SVG大多数是用<svg>+<defs></defs>（或者symbol）+<use></use>+</svg>的组合来使用的，defs 顾名思义就是「definitions」定义，我们可以把许多重复性质高的元素，放入defs 元素内，让它变成一个可以重复利用的物件。而symbol更多的只是包含单个图标。
1、SVG使用方式
不论哪种方式，svg都必须作为根标签
- 外链方式
这种方式是先定义好一个svg文件，再在html或css中引入。
// test.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG</title>
</head>
<body>
</body>
</html>
外链的方式仅仅是将svg元素作为一个图片，无法利用JS对其做一些操作，如改变大小颜色等。
- 内联方式
<div id="div1">
<svg width="100%" height="100%" >
<circle cx="100" cy="100" r="40" fill="red" id='circle'></circle>
</svg>
</div>
内联方式可以向操作普通html元素一样通过getElementById拿到dom，再通过setAttribute方法做属性操作：
<script type="text/javascript">
var c = document.getElementById('circle');
c.setAttribute('fill','blue');
</script>
2、defs & use
- 实例1：简单组合
<defs>
<rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>
基本组合
- 实例2：复杂组合
<defs>
<g id="g1">
<rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
<circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
</g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>
复杂组合
- 实例3：渐变
<defs>
<linearGradient id="a1">
<stop offset="5%" stop-color="#F00" />
<stop offset="95%" stop-color="#ff0" />
</linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>
渐变
- 实例4：路径
<defs>
<path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
<textPath xlink:href="#a1">这是随路径跑的文字，很酷吧
</textPath>
</text>
路径
- 实例5：裁切
<defs>
<clipPath id="a1">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#a1)" fill="#000" />
裁切
- 实例6：遮罩
<defs>
<mask id="mask1">
<rect x="50" y="50" width="100" height="100" fill="#ccc"/>
<rect x="150" y="150" width="50" height="50" fill="#fff"/>
</mask>
</defs>
<rect id="box1" x="50" y="50" width="150" height="150" fill="#0f0"/>
<rect id="box2" x="50" y="50" width="150" height="150" fill="#f00" mask="url(#mask1)"/>
遮罩
- 实例7：标志marker
<defs>
<marker id="r" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
<circle fill="#fff" stroke="#000" stroke-width="10" cx="25" cy="25" r="25"/>
</marker>
<marker id="g" viewBox="0 0 50 50" refX="25" refY="25" markerWidth="10" markerHeight="10" orient="45" >
<rect fill="#0a0" width="50" height="50"/>
</marker>
<marker id="b" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
<circle fill="#f99" stroke="#f00" stroke-width="10" cx="25" cy="25" r="25"/>
</marker>
</defs>
<polyline points="20,100 50,100 80,20 110,80 140,30 170,100 200,100" fill="none" stroke="black" stroke-width="1" marker-end="url(#b)" marker-start="url(#r)" marker-mid="url(#g)"></polyline>
marker
- 实例8：滤镜
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />
滤镜
3、控制svg
- CSS 方式
svg元素和html元素一样，都可以用class属性添加类名来控制样式，只是对于svg元素而言，可控制的样式较少，常见的有fill,stroke,stroke-width
,opacity以及transform，看一个例子：//定义区 <svg> <symbol id="ic"> <path fill="#000" d="..."/> </symbol> </svg> //使用区 <svg class="icon" viewBox="0 0 100 125"> <use class="ic-1" xlink:href="#ic" x="0" y="0" /> </svg> <svg class="icon" viewBox="0 0 100 125"> <use class="ic-2" xlink:href="#ic" x="0" y="0" /> </svg> //定义样式 .icon { width: 100px; height: 125px; } use.ic-1 { fill: skyblue; } use.ic-2 { fill: #FDC646; } svg path { fill: inherit; } //防止.ic-1,.ic-2设置的fill被path覆盖
symbol元素和defs差不多，都是用来组合元素的，但symbol更多的用于单个图标的组合
- JS 方式
要在SVG内动态新增<path>或<rect>等元素，要使用createElementNS，而不是createElement，因为svg和html不在同一个命名空间里。<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <svg id="s" xmlns="http://www.w3.org/2000/svg"/> <script type="text/javascript"> function makeSVG(tag, attrs) { var el= document.createElementNS('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'}); document.getElementById('s').appendChild(circle); </script> </body> </html>
4、svg最佳实践
在工作中svg使用最多的场景还是当小图标使用，替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于：1、少发一次http请求；2、放大不会变形；3、易于用JS控制，比iconfont更灵活。
最佳做法(SVG sprite)：
- 1、将所有需要用到的小图标统一定义在svg下，该svg要设置display:none，每个小图标用symbol包围，每个symbol取一个id，方便后续调用；
- 2、使用svg+use的方式调用，use中用属性xlink:href='#id'来引用相应图标，可以给每个svg取一个类名，方便css和js动态控制；
- 3、通过getElementById的方式获取需要改变属性的use元素，为其动态添加或删除相应的类名；
- 4、添加的类名最终是运用在symbol上，symbol中定义的图标（path）会覆盖类名中对应的属性，所以不要忘了设置symbol中元素的属性继承自symbol，就像
上例中：svg path { fill: inherit; }； - 5、要想实现更为复杂的效果，如渐变等，可以使用defs；
- 6、要想做动画效果，可以在css类名中控制opacity、transform、stroke-dasharray和stroke-dashoffset属性。
5、SVG动画
5.1 路径动画
路径动画基本是svg动画里最常用的了，其基本原理是动态改变stroke-dasharray和stroke-dashoffset属性的值：
实例：
<body>
<svg>
<symbol viewBox="0 0 24 20" id="ic" xmlns="http://www.w3.org/2000/svg">
<title>点赞前</title>
<path d="M22.825 6.727a6.236 6.236 0 0 0-1.8-3.818A5.275 5.275 0 0 0 17.36 1.44a5.275 5.275 0 0 0-3.667 1.47A11.134 11.134 0 0 0 12 5.09a11.134 11.134 0 0 0-1.692-2.18A5.275 5.275 0 0 0 6.64 1.44a5.275 5.275 0 0 0-3.667 1.47 6.236 6.236 0 0 0-1.8 3.817c-.044.546-.1 2.095 1.236 4.364 2.584 4.364 7.655 6.802 9.59 7.636 1.935-.834 7.006-3.272 9.59-7.636 1.337-2.27 1.28-3.83 1.235-4.364z" stroke="#454545" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="icon" viewBox="0 0 100 125">
<use class="ic-1" xlink:href="#ic" x="0" y="0" />
</svg>
</body>
svg.icon {
width: 120px;
height: 135px;
}
use.ic-1 {
stroke: gray;
fill: gray;
animation: move 3s linear forwards;
}
@keyframes move {
0% {
stroke-dasharray: 30px, 30px;
}
100% {
stroke-dasharray: 30px, 0px;
}
}
svg path {
fill: inherit;
stroke: inherit;
}
效果就是stroke从30px长和30px空白逐渐变得没有空白
5.2 SMIL动画(2018/1/1更新)
以上动画方式总是需要借助css来实现，其实svg专门有做动画的元素
先看移动端兼容性：
SVG SMIL animation
- set
在特定时间之后修改某个属性值
用法：
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<set attributeName="x" attributeType="XML" to="60" begin="3s" />
</text>
</g>
</svg>
这个「马」会在3秒之后从横坐标160的位置移动60这个位置(瞬移，无动画效果)
- animate
实现单属性(不包含css的transform)的动画过渡效果
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>
- animateTransform
专用于transform动画
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite"/>
</g>
</svg>
- animateMotion
专用于复杂的路径动画
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
5.3 小结
关于用svg做动画，更推荐用5.2的方式，并且5.2中animate的用法是最多的，animate元素还可以组合使用：
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</svg>
此外，svg动画还可以手动控制(JS)动画的开始和暂停
// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();
// 重启动
svg.unpauseAnimations()
