SVG高级应用及动画
canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎，某些场景使用起来还是过于繁琐的，不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版，图标，相关动画还是非常高效的，而且 svg 还是矢量图形，高清还原各种屏幕尺寸的设计简直就是神器。
svg 基础知识不再讲解，结合svg特点和应用场景，主要介绍如下几方面的内容
- svg sprite
- css background-image 插入svg
- 文字路径
- 路径动画
SVG sprite
SVG sprite 之于 font-face 的优势就是矢量图的抗锯齿效果，再也不需要为适配高清屏而操心。使用方式就是 svg 标签结合 symbol元素即可，其中 svg 是容器，而symbol 则是组件模板。怎么把svg组件显示出来呢？使用 use 元素指向组件的id即可，如下所示：
<svg>
<symbol id="ok">
<!-- svg元素或组合 -->
</symbol>
<!-- ... -->
</svg>
<use href="#ok"/>
当然网上有很多工具可以帮我们把图标自动sprite，比如：iconfot，gulp-svg-symbols
在css中插入svg
SVG 添加到网页中有多种方法，最常见的是：
- 在 HTML 中内联
object、iframe或embed标签插入img标签- CSS
background-image属性
html 内联方式
<svg>
<title>line</title>
<line x1="20" y1="20" x2="100" y2="100">
</svg>
使用 object、iframe 或 embed 标签插入
<object data="flag.svg" type="image/svg+xml"></object>
<iframe src="flag.svg" frameborder="0"></iframe>
<embed src="flag.svg" type="" />
使用img标签插入
<img src="flag.svg"/>
现在重点介绍一下使用 css background属性插入的方式；既可以使用图片路径也可以使用 base64 格式的data URI 方式
.svg-bg {
background-image: url("./bg.svg");
}
.svg-background {
background-image: url("data:image/svg+xml;<DATA>");
}
我认为使用 background base64 引入svg是最具灵活性的一种方式，还可以加入svg动画，不需要额外加载图标，只需引入css即可。同时跟普通图片相比它又有着抗锯齿的优势，因此元素尺寸随意调整不担心失真。比如下面使用background data URI 引入的加载动画css：
<style>
.loading{
width: 50px;
height: 50px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M10 40a30 30 0 1130 30' stroke-width='4' stroke='hsl(220,90%,60%)' fill='none'%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1.4s' type='rotate' from='0 40 40' to='360 40 40' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")
no-repeat center / cover;
}
</style>
<body>
<div class="loading"></div>
</body>
文字路径
svg 除了绘制图形，插入文字也是很方便的，方式也简单，使用 text 元素包裹文本内容即可
<text fill="hsla(260,80%,50%,1)" x="10" y="40" font-size="30"> I Love SVG </text>
还有一种很实用的效果就是文字路径，也就是文字按照定义好的 path 进行排列显示，这需要使用到另一个标签 textPath。实现方式：首先定义一个path元素（这里使用三次贝塞尔曲线），然后 textPath元素使用 xlink:href 属性引入path，最后再用 text标签包裹。
<g>
<title> 文字路径 </title>
<path id="path" d="M 10 100 C 100 0 150 300 250 100" fill="none" stroke="#555"/>
<text x="10" y="100" stroke="hsl(280,100%,50%)">
<textPath xlink:href="#path">I Love SVG I Love SVG I Love SVG</textPath>
</text>
</g>
svg路径动画
svg动画既可以使用 css3 相关属性实现，也可以使用自己独有的SMIL实现。SMIL主要用以下标签：
-
animate：基础动画元素，实现单属性的动画过渡效果
-
animateTransform： 实现transform变换动画效果
-
animateMotion：路径动画效果
这里只介绍路径动画，基础动画和变换动画与css动画相似，就不再介绍。来看一个基于 css3 的 animation 实现百分比加载的动画。这里用到了两个关键属性：
-
stroke-dasharray：设置线条断开为虚线，数值越大，线就越长
-
stroke-dashoffset：设置线条的偏移，设置后，线段就会偏移相应的值，实现线条动画只要动态改变这个偏移值就好
首先需要通过js获取路径的总长度
//获取路径长度
const arc = document.getElementById('circle');
console.log(arc.getTotalLength()); //250.92141723632812
接着编写svg相关
<style>
circle {
fill: transparent;
stroke-width: 10px;
}
#circle {
stroke-dasharray: 250.921;
stroke-dashoffset: 250.921;
animation: round 3s linear infinite;
}
@keyframes round {
to {
stroke-dashoffset: 0;
}
}
</style>
<g>
<circle cx="100" cy="60" r="40" stroke="#ccc" />
<circle id="circle" cx="100" cy="60" r="40" stroke="hsl(160,80%,50%)" />
</g>
当然其他stroke线条动画也类似
接着我们再基于svg animateMotion标签来实现path路径动画，其中path是运动路径，dur 是持续时间，repeatCount设置是否循环
<g id="pathAnimate">
<title> 路径动画 </title>
<path stroke="hsl(0,0%,60%)" d="M 10 300 Q 150 100 300 300 T 490 300Z" stroke-width="2" fill="none"/>
<circle cx="0" cy="0" r="8" stroke-width="1" stroke="hsl(300,10%,40%)" fill="hsl(300,100%,50%)">
<animateMotion path="M 10 300 Q 150 100 300 300 T 500 300Z" dur="4s" repeatCount="indefinite"/>
</circle>
</g>
使用svg实现路径动画真是性价比超高。
