<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0;
padding: 0;
background-color: #001122;
/* 全屏 */
width: 100%;
height: 100%;
/* 清空字号，免得影响 svg */
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<!-- animate
attributeType: 标签类型
attributeName: 需要支持动画的属性
begin: 动画开始时机
from: 开始值
to: 结束值
dur: 动画时间
fill: freeze（停留在最后）、none（默认，回到起点）
repeatCount: 动画次数，indefinite(无限次)，默认 1
-->
<!-- svg -->
<svg width="100%" height="100%">
<!-- 1 平移动画 -->
<rect x="50" y="10" width="40" height="40" fill="red">
<!-- 动画 -->
<animate attributeType="XML"
attributeName="x"
from="50" to="200"
dur="1s"
repeatCount="indefinite"/>
<!-- 颜色变化 -->
<animate attributeType="XML"
attributeName="fill"
from="red" to="yellow"
dur="1s"
repeatCount="indefinite"/>
</rect>
<!-- 2 平移动画 - 往返 -->
<rect x="50" y="80" width="40" height="40" fill="red">
<!-- 动画 -->
<animate id="goright1" attributeType="XML"
attributeName="x"
begin="0; goleft1.end"
from="50" to="200"
dur="1s"
fill="freeze"/>
<animate id="goleft1" attributeType="XML"
attributeName="x"
begin="goright1.end"
from="200" to="50"
dur="1s"
fill="freeze"/>
<!-- 颜色变化 -->
<animate attributeType="XML"
attributeName="fill"
from="red" to="yellow"
dur="1s"
repeatCount="indefinite"/>
</rect>
<!-- 3 平移动画 - 往返 - 暂停 -->
<rect x="200" y="150" width="40" height="40" fill="red">
<!-- 动画 -->
<animate id="goleft2" attributeType="XML"
attributeName="x"
begin="0; goright2.end + 1s"
from="200" to="50"
dur="1s"
fill="freeze"/>
<animate id="goright2" attributeType="XML"
attributeName="x"
begin="goleft2.end + 1s"
from="50" to="200"
dur="1s"
fill="freeze"/>
<!-- 颜色变化 -->
<animate attributeType="XML"
attributeName="fill"
from="red" to="yellow"
dur="1s"
repeatCount="indefinite"/>
</rect>
</svg>
</body>
</html>
