畫綠色圓用固定布局，長寬設置一樣的，邊框50%，背景色設置綠色，需要寫字的話在布局里面寫字
svg：
iframe里面也能放圖片：
circle：cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy，圓的中心會被設置為(0, 0)，r屬性定義圓的半徑，fill填充顏色
viewbox="50 50 50 50"是只顯示從坐標(50,50)開始，向右50向下50的地方
直線line，兩個坐標做了確定：
stroke-width:》：粗細
polyline折線
<g>里面是一個組
attributeName操作所在元素的x屬性，values：從160到40到160，from = 起始值。to = 結束值
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="150" x="160"> 馬 <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" /> </text> </svg>
beigin="3s;5s"表示的是3s之后動畫走一下，6s時候動畫再走一下
dur完成動畫需要的時間
例如：
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬 <animate id="x" attributeName="x" to="60" begin="0s" dur="3s" fill="freeze" /> <animate attributeName="y" to="100" begin="x.end" dur="3s" fill="freeze" /> </text> </svg>
x.end x是id=x的元素
於是，實現了一個馬兒折線跑的效果，先橫向移動，再無縫縱向移動
begin="x.repeat(2)"指id為x的元素的動畫重復2次后執行
begin="accessKey(s)" ，按下鍵盤上的字母"s", 理論上動畫就會執行
begin="indefinite"：一直等，直到href條件觸發，x就由160變成60：
<svg width="320" height="200" font-family="microsoft yahei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="120" y="160" x="160">馬 <animate id="animate" attributeName="x" to="60" begin="indefinite" dur="3s" repeatCount="indefinite" /> </text> <a xlink:href="#animate"> <text x="10" y="20" fill="#cd0000" font-size="30">點擊我</text> </a> </svg>
calcMode, keyTimes, keySplines這幾個參數是控制動畫先快還是先慢類似這樣作用的
repeatCount表示動畫執行次數，可以是合法數值或者”indefinite“
repeatDur定義重復動畫的總時間
fill表示動畫間隙的填充方式。支持參數有：freeze | remove. 其中remove是默認值，表示動畫結束直接回到開始的地方。freeze“凍結”表示動畫結束后像是被凍住了
accumulate支持參數有：none | sum. 默認值是none. 如果值是sum表示動畫結束時候的位置作為下次動畫的起始位置。