画绿色圆用固定布局，长宽设置一样的，边框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表示动画结束时候的位置作为下次动画的起始位置。