SVG 动画 animation 横向位移

animate 

基础动画元素。实现单属性的动画过渡效果。

<svg width="320" height="320">
            <rect width="10" height="10" x="150" y="120" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)">
                <animate attributeName="x" from="160" to="60" dur="3s" repeatCount="indefinite" />
            </rect>
        </svg>

1.attributeName：
要变化的元素属性名称，① 可以是元素直接暴露的属性，例如，x, y ② 可以是CSS属性。例如，透明度opacity.
2.from, to, by, values
from：动画的起始值；
to:动画的结束值；
by：动画的相对变化值；
value:动画的多个关键点值，例如：values="10;40;10"
如果动画的起始值与元素的默认值是一样的，from参数可以省略；
by与to的区别：to表示绝对值，by表示相对值。拿位移距离，如果from是100, to值为160则表示移动到160这个位置，但是，如果by值是160，则表示移动到100+160=260这个位置；
如果to,by同时出现，则只识别to；
如果to，by，from，value 同时出现时，则只识别value；
dur：动画持续时间；
repeatCount：动画进行的次数，indefinite表示无限次数