1 .和傳統(tǒng)的圖像比起來，尺寸更小，且可壓縮性更強
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 width="256" height="112" viewBox="0 0 256 112">
<path ref='path' fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z" ></path>
</svg>
svg圖標之間進行轉化
1 .復雜的圖標之間過渡轉化還是需要專業(yè)的繪畫軟件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定義其實現(xiàn)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:動畫持續(xù)的時間
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:動畫執(zhí)行之前和之后如何給動畫的目標應用格式
1.none:動畫執(zhí)行前后不改變任何樣式
2.forwards:保持動畫最后一幀的樣式辈讶，由animation-direction,animation-iteration-count決定
3.backwards:動畫采用第一幀的樣式
4.both:執(zhí)行forwards和backwards執(zhí)行的動作。
16 .將多個文字進行重疊娄猫，取不同的offset,array即可。
17 .css實現(xiàn)
.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實現(xiàn)簽名
1 .需要簽名的字
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
2 .js代碼
let paths=this.$refs.g.querySelectorAll('path');
let len=[]
let delay=0
for(let i=0;i<paths.length;i++){
let l=paths[i].getTotalLength()
delay+=l+100
len.push(delay)
}
//根據路徑的長度媳溺，計算每次延遲的時間
一般流程
1 .使用ps打開想要加工的圖片，建立工作路徑
2 .設置圖層透明度為0碍讯，就可以看到路徑的樣子
3 .導出到illustrator,生成svg文件
