svg优点

1 .和传统的图像比起来，尺寸更小，且可压缩性更强
2 .可伸缩
3 .任何分辨率之下都可以被完美的打印
4 .svg中图像中的文本是可选的，同时也是可搜索的，很适合做地图。
5 .

svg路径动画

1 .路径上物体的运动朝向，物体垂直于切线方向移动，物体垂直于切线并且反向+180度移动
2 .以固定的旋转角度运动
3 .

js代码
 // let path=anime.path(this.$refs.path)
        // this.anime=anime({
        //     targets:this.$refs.s1,
        //     translateX: path('x'),
        //     translateY: path('y'),
        //     rotate: path('angle'),
        //     easing: 'linear',
        //     duration: 20000,
        //     loop: true
        // })

html代码

svg图标之间进行转化

1 .复杂的图标之间过渡转化还是需要专业的绘画软件AE
2 .简单的也必须每一个都要控制，比如菜单图标和返回图标的转化
3 .先找阿里妈妈上面的图标，然后进行

svg图形渐变

1 .果然svg变化过渡之间会有图象残留
2 .还是需要path变化来实践
3 .不能使用原来自带的api来看。
4 .

svg线条动画

1 .demo：https://www.villainhr.com/page/2017/05/01/SVG%20%E5%8A%A8%E7%94%BB%E7%B2%BE%E9%AB%93
2 .需要了解的属性

1.stroke:定义秒变的颜色
2.stroke-dasharry:定义dash和gap的长度，主要通过,来分隔实线和间隔的值，stroke-dasharry=“5，5”,按照实线为5,间隔为5的排布重复下去
3.stroke-dashoffset:设置dasharray定义其实现dash线条开始的位置
4.stroke-linecap:线条的端点样式。
5.stroke-linejoin:线条连接的样式
6.stroke-opacity:线段的透明度
7.stroke-width:线的粗细
8.原理
8.1:通过dasharray将实线部分隐藏，空余为全线断段长，然后将实线部分增加至全长
8.2:通过dashoffset来移动新增的实线部分，造成线段移动的效果。

9 .animation-name:动画的名字
10 .animation-duration:动画持续的时间
11 .animation-timing-function:动画的运动函数
12 .animation-delay:动画的延迟时间
13 .animation-iteration-count:动画的播放次数
14 .animation-direction:动画是否反向播放

1.normal:每个动画结束，动画重置到起点重新开始。
2.alternate:动画交替反向运行，反向运行时，动画按步后退
3.reverse:反向运行动画，每个周期都是结束动画由尾向头运行
4.alternate-reverse:反向交替，反向开始交替

15.animation-fill-mode:动画执行之前和之后如何给动画的目标应用格式

1.none:动画执行前后不改变任何样式
2.forwards:保持动画最后一帧的样式，由animation-direction,animation-iteration-count决定
3.backwards:动画采用第一帧的样式
4.both:执行forwards和backwards执行的动作。

16 .将多个文字进行重叠，取不同的offset,array即可。
17 .css实现

.text{
    fill: none;
    stroke-width: 5;
    stroke-dasharray: 0 300;
//第一个值表示虚线的长度
//第二个只表示实线和虚线的距离
    stroke-dashoffset: 0;
    font-size: 200px;
    transition:fill .4s ease;
}
.s1{
    stroke: #F60A0A;
    animation:s11 6s ease-in-out forwards;
}
@keyframes s11 {
    100%{
        stroke-dashoffset: 1000;
        stroke-dasharray: 80 160;
    }
}

svg种使用transiton

1 .path { transition: fill .4s ease; }

svg文字

1 .text-anchor:定义参考点和实际字符之间的定位关系。start,middle,end,inherit
2 .tspan:可以嵌套的text标签
3 .

svg实现签名

1 .需要签名的字

            
            
            
            
            
            
            
            
2 .js代码
let paths=this.$refs.g.querySelectorAll('path');
        let len=[]
        let delay=0
        for(let i=0;i

一般流程

1 .使用ps打开想要加工的图片，建立工作路径
2 .设置图层透明度为0，就可以看到路径的样子
3 .导出到illustrator,生成svg文件