知識點：
-
CSS中使用animation控制動畫效果；
-
SVG中使用animateTransform標籤控制動畫效果；
PS：雖然兩者寫法上稍微有點區別，但原理上是一致的；
一，先來說說CSS中的控制方法。
<style>#svg { width: 1500px;height: 400px;background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3675415932,4054970339&fm=26&gp=0.jpg")}/* body{background: black}*//* animation:name duration timing-function delay iteration-count direction動畫屬性 名稱， 持續時長， 時間分佈函數，默認爲ease，延時多長時間，持續次數，默認爲1次 infinite表示無限次，指定運行方向*//* （ease:比如從左到右，開始較慢，中間較快，末尾較慢的運動） *//* 後面幾個參數可以不指定，只需指定前兩個的name和duration即可。*//* infinite表示執行無限次alternate表示鏡像執行，這個執行起來有循環效果，有意思 */#cir {animation: wjw 2s infinite alternate}@keyframes wjw {0% {transform: scale(0.5)}/* 50% {transform: scale(5);fill: aqua;} */100% {transform: scale(10);/* x:150; */fill: rgb(73, 255, 88);}}</style><div id="svg"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="0 0 500 500"><g stroke="yellow" stroke-width="1" id="g"><polygon points="50 0 100 0 100 100 150 100 75 150 0 100 50 100" stroke-dasharray="2 3 2"></polygon><text x="70" y="40" stroke-width=“10” text-anchor="center">點</text><text x="70" y="80" stroke-width=“10” text-anchor="center">在</text><text x="70" y="120" stroke-width=“10” text-anchor="center">看</text></g></svg> </div>
animation:name duration timing-function delay iteration-count direction
各個字段含義分別是：
name--動畫屬性名稱；
duration--持續時長；
timing-function--時間分佈函數，默認爲ease；
（ease:比如從左到右，開始較慢，中間較快，末尾較慢的運動）
delay--延時多長時間；
iteration-count--持續次數，默認爲1次 infinite表示無限次
direction指定運行方向，alternate表示鏡像執行，這個執行起來有循環效果，有意思。
animation動畫
PS：後面幾個參數可以不指定，只需指定前兩個的name和duration即可。
二，再來看看，直接在SVG中的animateTransform標籤的用法。
代碼就拿我做的“點在看”來說吧。爲了使文字豎排，用了比較笨的方法，就是上下排列三個text
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="-200 0 300 300"><g stroke="yellow" stroke-width="1" ><polygon points="50 0 100 0 100 100 150 100 75 150 0 100 50 100" stroke-dasharray="2 3 2"></polygon><text x="75" y="25" text-anchor="middle">點</text><text x="75" y="55" text-anchor="middle">在</text><text x="75" y="85" text-anchor="middle">看</text><animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="scale" from="0" to="2" repeatCount="indefinite" /></g></svg>
其中，最關鍵的是<animateTransform>這個標籤，這裏面定義了與CSS中animation類似的屬性，可對比參考下。其中type有五種類型：rotate（旋轉）、scale（縮放）、skewX（X軸方向偏移）、skewY（Y軸方向偏移）、tranlate（位移）。
用好這個aniateTransform標籤，可以創造出很多意想不到的效果，後面繼續。
想看展示效果，請移步公衆號：Xi說SVG，文章同步更新。