準(zhǔn)備工具：Adobe AI+PS

1、確定SVG畫布的大小，在PS中切出需要描邊效果的區(qū)域，以此區(qū)域的大小做為SVG容器的大小。 2、將PS中切好的圖片直接拖拽到AI中 3、使用AI中的鋼筆工具勾勒出SVG路徑，注意要將前景色置透明，否則路徑包圍的區(qū)域?qū)磺熬吧畛洹Ｊ褂娩摴P工具可適當(dāng)多添加些錨點，以保證路徑的精確。 4、筆畫多的路徑需要分開繪制，以上圖中的“留”字為栗子 5、重復(fù)上面步驟，將所有添加描邊效果的部位勾勒出來 6、在AI中將鋼筆工具勾勒好的路徑保存成 SVG 格式 ? ? ?File → Save As ?選擇SVG格式保存 7、打開剛剛保存好的 SVG 文件，就得到了 SVG 的路徑代碼 8、將獲得到的路徑代碼按需稍加修改，其中描邊的顏色和描邊的寬度可在AI中繪制的時候設(shè)置好，也可在生成的代碼中按需修改。

9、CSS3 SVG描邊動畫及實現(xiàn)原理，依賴兩個屬性stroke-dasharray和stroke-dashoffset
stroke-dasharray 表示虛線描邊。可選值為：none, dasharray, inherit. 其中，none表示不是虛線；dasharray為一個逗號或空格分隔的數(shù)值列表。表示各個虛線端的長度。可以是固定的長度值，也可以是百分比值；inherit表繼承。
stroke-dashoffset 表示虛線的起始偏移。可選值為：percentage, length, inherit. 百分比值，長度值，繼承。
原理就是將描邊設(shè)置虛線，stroke-dasharray的數(shù)值與路徑長度一致或者大于路徑長度即可，需嘗試確定，路徑長的話就給個大點的值，路徑短就給個小點的值，效果滿意即可。
然后再設(shè)置路徑的偏移量stroke-dashoffset與stroke-dasharray的值一樣的大即可，然后添加定義好的動畫，將偏移量從樣式中設(shè)置好的數(shù)值過渡到0，就實現(xiàn)了描邊的效果。

/**********SVG描邊動畫**********/@include keyframes(dash, webkit moz ms spec){to {stroke-dashoffset: 0;} } /**********SVG描邊動畫**********/ path,rect{stroke-dasharray: 400;stroke-dashoffset: 400;@include animation(dash 1.5s ease-in-out 1);&.p-long{stroke-dasharray: 2000;stroke-dashoffset: 2000;@include animation(dash 1.5s ease-in-out 1);} }

10、描邊效果

?

?

11、后續(xù)處理，通過 js 控制SVG效果執(zhí)行完成之后將包裹著SVG的DIV隱藏起來，再將正常的設(shè)計稿樣子顯示出來。 這樣就實現(xiàn)了先是看到SVG的路徑動畫，動畫執(zhí)行之后看到真實內(nèi)容的效果了~

轉(zhuǎn)載于:https://www.cnblogs.com/moreyear/p/9100439.html

總結(jié)

以上是生活随笔為你收集整理的SVG描边动画实现过程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。