這篇文章主要介紹jpg圖片轉(zhuǎn)換成svg文字路徑動畫的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站專注于龍文企業(yè)網(wǎng)站建設,響應式網(wǎng)站,
成都做商城網(wǎng)站。龍文網(wǎng)站建設公司,為龍文等地區(qū)提供建站服務。全流程按需制作，專業(yè)設計，全程項目跟蹤，
創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務
用svg+css可以實現(xiàn)一些讓人眼前一亮的效果，Ant Design 官網(wǎng)首屏就出現(xiàn)了svg動畫，coding
官網(wǎng)首頁也出現(xiàn)svg動畫，也許在非前端人員看來效果很普通，但是在前端開發(fā)人員眼里，這種效果低調(diào)而又張揚！這和你做的jq
animate動畫一比較，高下立判！你還要說什么？
能做成Ant Design那樣的動畫效果是我的目標，我想先做個簡單點的效果，譬如這樣的文字描邊動畫效果
怎么做的呢？
這張jpg是我的頭像，最終呈現(xiàn)的效果就是以這張圖為基礎。
首先要在PS中將圖的選區(qū)轉(zhuǎn)換成路徑
再將帶路徑的ps文件導出到Ai
需要注意的是，第二個字母的路徑由兩部分組成，外層一個大選區(qū)，里面一個小的選區(qū)，這里要選“窗口”→“路徑查找器”，形狀模式選“差集”。
保存成svg格式，得到了代碼：
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;}
將css修改一下
.st0{fill: none;
stroke-width:2;
stroke:#30479B;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dasharray: 250, 250;
animation: lineMove 5s ease-out infinite;
}
@keyframes lineMove {
0%{
stroke-dasharray: 0, 250;
}
100%{
stroke-dasharray: 250, 250;
}
}關于svg和css相結(jié)合，以本示例為參考：
- fill 表示填充顏色，值是none表示沒有顏色
- stroke 是邊框的顏色
- stroke-width 定義邊框的厚度
- stroke-dasharray 這個屬性第一個參數(shù)定義了邊框虛線長度，第二個參數(shù)是虛線的間距，什么是“邊框虛線”，你可以認為邊框本來就是虛線而不是實線，只不過虛線的間距為0，看起來就像是實線了。
- 這里用到了css3的@keyframes特性，將過渡動畫控制stroke-dasharray 樣式。
最終整體代碼如下
Document
svg{width: 250px;height: 250px;}
.st0{fill: none;
stroke-width:2;
stroke:#30479B;
stroke-dasharray: 250;
animation: lineMove 5s ease-out infinite;
}
@keyframes lineMove {
0%{
stroke-dasharray: 0, 250;
}
100%{
stroke-dasharray: 250, 250;
}
}
重慶分公司
重慶分公司