https://segmentfault.com/a/1190000007811310?utm_source=tag-newest
通過上述作者知道了一些東西
以下是我自己試驗了一下，可行，重點是從作者那里知道了
動起來
在開始實現路徑（path）描邊動畫前，先要明白stroke-dasharray 和stroke-dashoffset這兩個概念。
Stroke Dash Array
在SVG中也可以像CSS中那樣指定邊框為虛線要用到屬性stroke-dasharray。stroke-dasharray屬性的參數，是一組用逗號分割的數字組成的序列。需要注意的是，這里的數字必須用逗號分割，雖然也可以插入空格，但是數字之間必須用逗號分開。每一組數字，第一個用來表示實線，第二個用來表示空白。
如果只有一個數字5，則表示會先畫5px實線，緊接着是5px空白，然后又是5px實線，從而形成虛線。
比如我有一條200px的線，我把stroke-dasharray的指定為200，它就表示先畫200px實線，緊接着是200px空白，然后又是200px實線，從而形成虛線。
Stroke Dash Offset
stroke-dashoffset屬性表示路徑從開始位置的偏移量。比如在下面我定義了stroke-dasharray的值為5、10、30、10表示5px的虛線、10px的空白、30px的虛線、10px的空白，如此循環。然后，通過改變它的stroke-dashoffset的值來看看會發生什么：
從圖片中可以看到，通過調整stroke-dashoffset的值，可以重新設置路徑開始的位置。在上面的實例中，我設置stroke-dashoffset的值為15px，可以看到路徑移動了15px的距離。
動態改變偏移值
我們把路徑的stroke-dasharray和stroke-dashoffset都設置為200px的值，會發現什么也看不到了，因為路徑的虛線和空白距離都是一樣的，而stroke-dashoffset的值也是200px，即表示路徑從開始的位置偏移了200px的值（記住路徑的偏移是從左邊的原點開始的），所以就看到一片空白。
如果使用CSS3的來動態改變路徑的偏移值即從200px到0，就會看到路徑就像是用筆慢慢畫出來的。
stroke-dasharray:73.50196075439453;
stroke-dashoffset: 73.50196075439453;
這倆個意思，如果不寫這倆個path可動不起來啊
以下我自己試驗了一番，代碼可用，簡單易懂！Nxj!!!
svg出現了一個新的概念：viewBox
SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示
viewBox="x, y, width, height" // x:左上角橫坐標，y:左上角縱坐標，width:寬度，height:高度
1.當viewbox中的width和height1是svg寬高的一半時，相當於svg會被放大一倍
2.當viewbox中的width和height1是svg寬高的二倍時，相當於svg會被縮小一倍
就是相當於把viewbo所選的區域在SVG中繪制滿！！！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@-webkit-keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
@keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
body{
background: #000000;
}
#div1{
width: 400px;
height: 400px;
background: white;
margin: 0 auto;
}
path {
stroke-dasharray: 73.50196075439453;/*這倆個不寫的話，不知道起始點也無法確認起始線，因此必須寫這個才能配合上方的animatePath改變起始點，繪制出效果！*/
stroke-dashoffset: 73.50196075439453;
}
.svg-icon path {
stroke: rgba(255, 0, 215, 0.9);
fill: none;
stroke-width: 1;
animation: animatePath 2s 0.5s forwards;
}
</style>
</head>
<body>
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon " width="100%" height="100%" viewBox="0 0 20 20">
<path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" >
</path>
</svg>
</div>
</body>
</html>