? ? 以此前對(duì)svg的了解，就是通過(guò)rect／circle／line……等繪制規(guī)則圖形，或者利用path路徑來(lái)繪制更復(fù)雜的圖形。但是這種繪制是，當(dāng)我們寫(xiě)好svg的xml文件嵌入html代碼，頁(yè)面載入的時(shí)候，圖形是已經(jīng)繪制完成了的。
? ? 那么如何能夠讓svg的繪制是動(dòng)態(tài)的呢？也就是我們?nèi)绾文軌蜃宻vg的繪制過(guò)程一點(diǎn)點(diǎn)的出現(xiàn)，而不是刷新頁(yè)面圖形就已經(jīng)渲染出來(lái)。于是，翻開(kāi)許久沒(méi)看的svg文檔查看，但是縱覽文檔幾遍，還是沒(méi)有發(fā)現(xiàn)svg存在這樣的屬性或者方法提供。于是查資料，最后發(fā)現(xiàn)svg有個(gè)比較重要的屬性，名為stroke, 中文軟件中稱之為“描邊”。如上圖circle的
strock 屬性-->描邊顏色；
strock－width 屬性-->描邊寬度；
等等很多屬性，不一一列舉，因?yàn)榻裉煳覀円獙?shí)現(xiàn)動(dòng)態(tài)繪制的關(guān)鍵屬性是:
stroke-dasharray-->表示虛線描邊;
stroke-dashoffset-->表示虛線的起始偏移;
? ? ?如圖繪制了一個(gè)半徑100的圓，然后通過(guò)stroke-dasharray屬性讓圓成為了50px一段的虛線，而stroke-dashoffset則表示虛線的便宜位置。由此我們就可以想象：當(dāng)我們把stroke－dasharray設(shè)置到足夠大，大到比我們繪制的圓的周長(zhǎng)還大時(shí)，會(huì)發(fā)生什么呢？那其實(shí)繪制的還是一個(gè)完整的圓。由此，我們可以通過(guò)animation來(lái)動(dòng)態(tài)的改變stroke－dashoffset的偏移位置時(shí)，這個(gè)圓不就動(dòng)起來(lái)了么？that‘s it ！
? ? ?如此，我們通過(guò)class將stroke跟css屬性animation結(jié)合起來(lái)了，通過(guò)控制stroke-dashoffset的偏移位置的改變來(lái)實(shí)現(xiàn)動(dòng)態(tài)的繪制圖形的效果。事實(shí)上，這種手法實(shí)現(xiàn)了svg的動(dòng)態(tài)繪制“效果”，但我們必須明白的是：這并不是表明svg是我們眼之所見(jiàn)繪制逐漸繪制出來(lái)的圖形；而是，svg繪制方式本身沒(méi)有改變，一如前文所言當(dāng)頁(yè)面加載的時(shí)候就已經(jīng)完成了繪制，我們所見(jiàn)的動(dòng)態(tài)繪制效果是通過(guò)圖形虛線段和偏移來(lái)實(shí)現(xiàn)的svg圖形的動(dòng)畫(huà)。
? ? ??上圖css代碼中，animation：dash 5s linear infinite; ?infinite會(huì)讓stroke的偏移位置動(dòng)畫(huà)一直執(zhí)行，視覺(jué)效果上也就是圓圈一直在被繪制。如果去掉infinite，動(dòng)畫(huà)會(huì)在第一次繪制之后停止，圓圈也會(huì)消失。圓圈消失是因?yàn)閯?dòng)畫(huà)結(jié)束后stroke-dashoffset的值會(huì)回到1000，偏移位置大于circle的周長(zhǎng)，所以circle看不見(jiàn)了，并不是circle不顯示了，這點(diǎn)需要注意。
? ? ? 如果想要?jiǎng)赢?huà)繪制完成之后保持繪制狀態(tài)，很簡(jiǎn)單，只需要把a(bǔ)nimation中的infinite替換成forwards ，這樣當(dāng)圓圈繪制完畢，動(dòng)畫(huà)會(huì)一直保持著繪制結(jié)束時(shí)的狀態(tài)。于是，我們要的動(dòng)態(tài)繪制效果便達(dá)成了！
