svg相关知识 svg相关知识

svg的各种使用途径
svg格式的图片，打开里面是这样的：

文章图片

文章图片

文章图片

文章图片

也可以使用utf-8：

文章图片

注：base64

文章图片

经过Base64 编码后的文件体积一般比源文件大 30% 左右
注：Data URI
Data URI的官方名称叫Data URI Scheme，开发者可以使用它把图像的内容直接嵌入到网页里，减少HTTP 请求 (http request) 的次数，优化网页。
建议开发者限制Data URI在较小资源上的使用，并且不要在CSS或内联HTML里多次使用。15-20KB已是Data URI的最大尺寸了。使用雪碧图代替性能更好
基础图形
标签：
文章图片

圆标签： svg相关知识
文章图片

文章图片

测试代码：

文章图片

文章图片

结果：

文章图片

线和折线标签：
文章图片

测试代码：

文章图片

文章图片

结果：

文章图片

上例可以总结说，在普通html标签上可以写css属性，也可以写在svg的标签上
矩形标签： svg相关知识
文章图片

测试代码：

文章图片

结果：

文章图片

椭圆标签：
文章图片

测试代码：

文章图片

结果：

文章图片

多边形标签：
文章图片

测试代码：

文章图片

结果：
svg相关知识
文章图片

路径标签：
文章图片

文章图片

测试代码：

文章图片

结果：

文章图片

文本标签：
文章图片

测试代码：

文章图片

总结，文字相关的css的颜色都可以用在text标签上，除了color
结果：
svg相关知识
文章图片

复制标签：
文章图片

测试代码：

文章图片

结果：

文章图片

组标签
文章图片

测试代码：

文章图片

结果:

文章图片

没有写fill，默认填充黑色
标签上可以写任何css样式，会作用于里面的所有标签，也会作用于和引用的，但是如果写鼠标移动到上面的样式时#miqi:hover{}，将不会用作于和引用的
引用标签 svg相关知识
文章图片

测试代码：

文章图片

结果：

文章图片

平铺标签
文章图片

测试代码：

文章图片

结果：

文章图片

图片标签
文章图片

测试代码：

文章图片

结果：
svg相关知识
文章图片

动画标签
文章图片

测试代码：

文章图片

结果：

文章图片

变形标签
文章图片

测试代码：

文章图片

结果：

文章图片

环形进度条案例

文章图片

svg相关知识
文章图片

index.js:：

文章图片

文章图片

结果：

文章图片

js操作svg

文章图片

文章图片

文章图片

例子：

文章图片

操作网上下载的svg图，让这颗球飞出去：
文章图片

代码：
svg相关知识
文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

使用标签将需要操作的球的相关标签包起来，然后写动画

文章图片

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

Documentdiv { 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; }

这个动画呈现效果是：当?标移动到div上的时候，执?width 改变动画。
transition是过度动画。但是transition只能在某个标签元素样式或状态改变时进?平滑的动画效果过渡，?不是马上改变。
transition是渐变的意思，就是某个属性从?个值逐渐变成另?个值，?如width：从50px，到200px
基本表达式
transition: transition-property transition-duration transition-timing-function transition-delay
transition-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 直接实现动画

其主要思想是通过setInterval或setTimeout?法的回调函数来持续调?改变某个元素的CSS样式以达到元素样式变化的效果。
存在的问题
javascript 实现动画通常会导致页?频繁性重排重绘，消耗性能，?般应该在桌?端浏览器。在移动端上使?会有明显的卡顿。
Jquery的animate()

jQuery animate() ?法?于创建?定义动画。
语法：
$(selector).animate({params},speed,callback);
requestAnimationFrame

* { margin:0; padding:0; } div { width: 100px; height: 100px; background: red; }

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动画

Document*{ margin:0; padding:0; }

canvas作为H5新增元素，是借助Web API来实现动画的。
插件 ?上可以搜到很多封装好的动画插件，这些插件可以直接引?到页?中，通过初试话和配置的?式进?设定，直接在页?中展?动画。
如：waves，textillate.js等等。
引?gif图? 如果在需求特别紧急，?且动画?特别复杂的情况下，??没有把握按时实现效果，或者代价太?，真的，别犹豫，上gif图?吧，不要在技术上纠结了，虽然在
?程师的?度上这样做很low，但是，?户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！
总结 【svg相关知识】复杂的动画是通过?个个简单的动画组合实现的。基于兼容性问题，通常在项?中，?般在