svg相关知识
svg的各种使用途径
svg格式的图片，打开里面是这样的：
也可以使用utf-8：
注：base64
经过Base64 编码后的文件体积一般比源文件大 30% 左右
注：Data URIData URI的官方名称叫Data URI Scheme，开发者可以使用它把图像的内容直接嵌入到网页里，减少HTTP 请求 (http request) 的次数，优化网页。建议开发者限制Data URI在较小资源上的使用，并且不要在CSS或内联HTML里多次使用。15-20KB已是Data URI的最大尺寸了。使用雪碧图代替性能更好
基础图形
<svg>标签：
<circle>圆标签：
测试代码：
结果：
<line>线和<polyLine>折线标签：
测试代码：
结果：
上例可以总结说，在普通html标签上可以写css属性，也可以写在svg的标签上
<rect>矩形标签：
测试代码：
结果：
<ellipse>椭圆标签：
测试代码：
结果：
<polygon>多边形标签：
测试代码：
结果：
<path>路径标签：
测试代码：
结果：
<text>文本标签：
测试代码：
总结，文字相关的css的颜色都可以用在text标签上，除了color
结果：
<use>复制标签：
测试代码：
结果：
<g>组标签
测试代码：
结果:
没有写fill，默认填充黑色<g>标签上可以写任何css样式，会作用于里面的所有标签，也会作用于<use>和<defs>引用的，但是如果写鼠标移动到上面的样式时#miqi:hover{}，将不会用作于<use>和<defs>引用的
<defs>引用标签
测试代码：
结果：
<pattern>平铺标签
测试代码：
结果：
<image>图片标签
测试代码：
结果：
<animate>动画标签
测试代码：
结果：
<animateTransform>变形标签
测试代码：
结果：
环形进度条案例
index.js:：
结果：
js操作svg
例子：
操作网上下载的svg图，让这颗球飞出去：
代码：
使用<g>标签将需要操作的球的相关标签包起来，然后写动画
iframe方式引入svg后进行操作：
canvas和svg的区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
SVG 可以在H5中直接绘制，但绘制的是矢量图
由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器，SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。在控制台中可以看到canvas标签里面是没有单独的长方形存在的。
而SVG绘图时，每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作
3.适用范围不同
由于Canvas 和 SVG 的工作机制不同，
Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。
所以Canvas的文本渲染能力弱，而SVG最适合带有大型渲染区域的应用程序，比如地图。
而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。
而SVG由于DOM操作 在复杂度高的游戏应用中 会减慢渲染速度。所以不适合在游戏应用。
svg和普通img对比
普通img对比，优点将 SVG 内联减少 HTTP 请求，可以减少加载时间可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。可以通过将 SVG 标记包在a元素中，使其成为超链接。普通img对比，缺点直接使用svg标签这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护额外的 SVG 代码会增加HTML文件的大小。浏览器不能像缓存普通图片一样缓存内联SVG注意：你可能会在 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得
前端实现动画的方式
- CSS3 transition；
- CSS3 animation；
- javascript直接实现；
- jQuery的animate()API;
- requestAnimationFrame；
- SVG（可伸缩⽮量图形）；
- Canvas动画；
CSS3 transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:absolute;
}
}
.animat{
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.animat:hover{
width:300px;
}
</style>
</head>
<body>
<div class='animat'></div>
</body>
</html>这个动画呈现效果是：当⿏标移动到div上的时候，执⾏width 改变动画。transition是过度动画。但是transition只能在某个标签元素样式或状态改变时进⾏平滑的动画效果过渡，⽽不是马上改变。 transition是渐变的意思，就是某个属性从⼀个值逐渐变成另⼀个值，⽐如width：从50px，到200px
基本表达式 transition: transition-property transition-duration transition-timing-function transition-delaytransition-property ：需要做缓动的属性，默认值为all，就表⽰所有可以缓动的属性都做缓动动画transition-duration : 整个缓动动画的持续时间，⽐如1s 就是1秒transition-timing-function ：缓动动画的呈现速度⽅式，默认值为ease，即先慢再快再慢,还有linear（匀速）等其他⽅式transition-delay : 延迟执⾏动画时间
CSS3 animation
.animat{
animation: testAni 2s infinite alternate;
}
/*infinite表⽰动画⼀直循环播放*/
/*alternate表⽰动画下⼀次反向播放*/
@keyframes testAni {
0% {
width:100px;
}
30% {
width:200px;
}
100% {
width: 500px;
}
}0% 表⽰最开始，30%，表⽰整个动画时间的30%， 100% 表⽰结束，中括号⾥⾯就是需要呈现动画的属性。
语法：animation: namedurationtiming-functiondelayiteration-countdirection;name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称⽤来区别不同的动画。duration:完成动画所需要的时间（2s 或者 2000ms）timing-function:完成动画的速度曲线delay：动画开始之前的延迟iteration-count：动画播放次数direction：是否轮流反向播放动画（normal：正常顺序播放，alternate：下⼀次反向播放）如果把动画设置为只播放⼀次，则该属性没有效果。
使⽤animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的⽐例。animation是设置总的动画效果，⽽keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。
keyframes包含两部分，第⼀个是使⽤animation属性，第⼆部分是：⽤@keyframes定义动画
注：动画优化：1）因为动画改变的太频繁，所以我们最好⽤position：absolute或fixed的⽅式把元素脱离⽂档流，避免频繁重绘; 2）如果是定位属性：⽐如left，top等等，可以⽤transform：translate（）的⽅式来替代，这样性能更好.
注：transition适合于⼀次性的呈现动画，animation适合多次或者需要控制中间过程的动画.
注：css中的transform，transition，translate的关系
transform字面意思是：使…变形属性的作用是对给定的元素旋转，缩放，平移或扭曲，通过修改元素的坐标空间实现。使用方式：transform: rotate | scale | skew | translate |matrix;所以当我们需要对元素做这些操作时，就需要使用 transform 属性。
translate大伙在 transform 的值中应该发现了 translate ， translate 的意思就是平移，将元素按照坐标轴上下左右移动使用方式： transform: translate(200px,50px); 元素较原先的位置，往右移动 200px，往下移动 50px注意， translate 属性需要在 transform 中才能使用， translate 其实也是属于修改元素的空间位置。
transition字面翻译是过渡的意思，这个属性可以让元素的变化以动画的形式呈现，比如说过高度从100变到200 height:100px -> 200px ，没有其他属性的情况下，这个就是一瞬间的事，为了让页面交互友好些，希望高度的变化能有个过渡效果，那么 transition 就派上用场了。
transition 用来做动画效果非常的方便，但缺点也很明显，动画不支持循环，复杂的动画就难为它了，所以适用于一些简单的过渡效果。它有四个值：transition-property：指定属性用于生成过渡动画，如宽、高、颜色等等，包括上面介绍的 transform ，只要这个属性的值是可以变化就行，且起始状态都是明确的。也可以写：none(没有属性改变)、all（所有属性改变）这个也是其默认值；transition-duration：动画执行时间transition-timing-function：缓动函数， 内置了这些 ease | linear | ease-in | ease-out | ease-in-out ，也可以上 easings.net/ 挑选自己喜欢的效果transition-delay：延迟执行的时间
三个一起使用我们看下面这段 css，同时用上了我们刚介绍的三个属性，这段css的效果是，当鼠标移上元素的时候，元素在 200毫米内，匀速的往x轴和y轴放心移动了 100 像素。
.abc:hover {
transition: transform .2s ease;
transform: translate(100px,100px);
}javascript 直接实现动画
<body>
<div id="animat"></div>
<script>
let elem = document.getElementById('animat')
let left = 1;
//获取某个元素的宽度：obj.offsetWidth;
console.log(elem.offsetWidth);
let timer = setInterval(function(){
let elemWidth=elem.offsetWidth;
if(elemWidth<500){
//设置某个元素的宽度：obj.style.width;
elem.style.width=elemWidth+left+'px';
left ++;
}else
{
clearInterval(timer);
} },16);
</script>
</body>其主要思想是通过setInterval或setTimeout⽅法的回调函数来持续调⽤改变某个元素的CSS样式以达到元素样式变化的效果。存在的问题javascript 实现动画通常会导致页⾯频繁性重排重绘，消耗性能，⼀般应该在桌⾯端浏览器。在移动端上使⽤会有明显的卡顿。
Jquery的animate()
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery animate() ⽅法⽤于创建⾃定义动画。语法：$(selector).animate({params},speed,callback);
requestAnimationFrame
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="animat"></div>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
let elem = document.getElementById("animat");
let left = 0;
//⾃动执⾏持续性回调
requestAnimationFrame(step);
//持续该改变元素位置
function step() {
let elemWidth=elem.offsetWidth;
if(elemWidth<500){
//设置某个元素的宽度：obj.style.width;
elem.style.width=elemWidth+left+'px';
left ++;
requestAnimationFrame(step);
}
}
</script>
</body>
</html>requestAnimationFrame是另⼀种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的⽅法调⽤来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上⽐另两者要好。通常，我们将执⾏动画的每⼀步传到requestAnimationFrame中，在每次执⾏完后进⾏异步回调来连续触发动画效果。我们注意到，requestAnimationFrame只是将回调的⽅法传⼊到⾃⾝的参数中执⾏，⽽不是通过setInterval调⽤。
svg
如上实现了一个矩形往右平移SVG 指可伸缩⽮量图形 (Scalable Vector Graphics)SVG ⽤来定义⽤于⽹络的基于⽮量的图形SVG 使⽤ XML 格式定义图形SVG 图像在放⼤或改变尺⼨的情况下其图形质量不会有所损失SVG 是万维⽹联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是⼀个整体(SVG是HTML下的⼀个分⽀)
Canvas动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="550"></canvas>
<script type="text/javascript">
let canvas = document.getElementById("canvas");
//getContext()获取元素的绘制对象
let ctx = canvas.getContext("2d");
let width = 100;
let timer = setInterval(function(){
//clearRect不断清空画布并在新的位置上使⽤fillStyle绘制新矩形内容实现页⾯动画效果。
ctx.clearRect(0,0,700,550);
ctx.beginPath();
ctx.fillStyle = red;
ctx.fillRect(0,0,width,200);
ctx.stroke();
if(width>700){
clearInterval(timer);
}
width += 5;
},16);
</script>
</body>
</html>canvas作为H5新增元素，是借助Web API来实现动画的。
插件
⽹上可以搜到很多封装好的动画插件，这些插件可以直接引⼊到页⾯中，通过初试话和配置的⽅式进⾏设定，直接在页⾯中展⽰动画。如：waves，textillate.js等等。
引⽤gif图⽚
如果在需求特别紧急，⽽且动画⼜特别复杂的情况下，⾃⼰没有把握按时实现效果，或者代价太⼤，真的，别犹豫，上gif图⽚吧，不要在技术上纠结了，虽然在⼯程师的⾓度上这样做很low，但是，⽤户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！
总结
复杂的动画是通过⼀个个简单的动画组合实现的。基于兼容性问题，通常在项⽬中，⼀般在
- 桌⾯端浏览器推荐使⽤javascript直接实现动画或SVG⽅式；
- 移动端可以考虑使⽤CSS3 transition、CSS3 、animation、Canvas或requestAnimationFrame⽅式。