最近項(xiàng)目需求，要使用svg寫東西替代gif圖片姨夹，于是纤垂，趕鴨子上架，現(xiàn)學(xué)現(xiàn)賣磷账。
svg和canvas一樣峭沦，對(duì)有些圖形已經(jīng)設(shè)置了相應(yīng)的標(biāo)簽，直接使用標(biāo)簽即可繪圖够颠，例如rect:矩形熙侍，circle：圓形，這里我就不再多說了履磨，可以查看w3school教程蛉抓，或者打開https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg，直接查看API剃诅，這里說的直接是工作使用的兩個(gè)圖標(biāo)之間用線段連接并做動(dòng)畫巷送。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<svg width="410" height="600" xmlns="http://www.w3.org/2000/svg">
<path id="myPath" d="M0 0,400 400"
stroke="#0088ff" stroke-width="0.5" fill="none" transform="translate(0, 0)"/>
<text style="font-weight: bold;font-size: 20px; letter-spacing: -2px;text-shadow: 0 -1px 0px rgba(0,180,255,1)" fill="rgba(0,180,255,0.3)" transform="translate(0, 10)">
<textpath xlink:href="#myPath" >
<<
<animate attributeName="startOffset" from="100%" to ="0%" begin="0s" dur="2s" repeatCount="indefinite" keyTimes="0;1" calcMode="paced" keySplines="0.1 0.2 .22 1"/>
</textpath>
</text>
</svg>
</div>
</body>
</html>
效果：小箭頭循環(huán)從底部沿著直線運(yùn)動(dòng)到最上面。
其中遇到的問題：
（1）項(xiàng)目中svg比較復(fù)雜矛辕，并且設(shè)置了overflow:hidden笑跛，開始沒找出來付魔，箭頭一直不顯示，但是一直在動(dòng)飞蹂，這時(shí)修改父級(jí)的寬和高几苍，保證在svg的寬高以上或者相等；
（2）path的路徑陈哑，要在svg的高以下的值妻坝，不然箭頭到達(dá)邊緣只顯示一半；
（3）如果項(xiàng)目?jī)蓚€(gè)元素之間位置比較復(fù)雜惊窖，不需要給svg旋轉(zhuǎn)位移刽宪，那樣text里面的內(nèi)容會(huì)變化，因?yàn)檫@是對(duì)畫布進(jìn)行了操作界酒，可以在svg外面的div進(jìn)行旋轉(zhuǎn)位移操作圣拄；
（4）text是svg里操作文本的標(biāo)簽，textpath是沿著path路徑設(shè)置毁欣，animate使沿著path路徑的文本運(yùn)動(dòng)起來庇谆。
箭頭可以使用marker，但是箭頭沿著路徑(textpath)運(yùn)動(dòng)(animate)起來署辉，這個(gè)排列組合一直出不來族铆，嘿嘿，所以偷懶用了兩個(gè)小于符號(hào)哭尝，還好和箭頭很像哥攘。嘿嘿~
