沿路径旋转运动

<?xml version="1.0" encoding="utf-8"?>
　　<!-- Author : Blueknight,Hangzhou,China 2000 -->
　　<svg width="100" height="100">
　　<rect x="-5" y="-5" width="10" height="10" style="fill: red">
　　<animateMotion path="M10 50 C10 0 90 0 90 90" rotate="auto"
　　dur="5s" repeatCount="indefinite"/>
　　</rect>
　　</svg>
　　讲解:
　　这里比沿路径运动多了一个rotate属性.rotate决定对象在运动过程是否沿路径方向旋转.auto为沿路径方向(就是始终垂直路径),auto-reverse为沿路径方向旋转180.也可自定义一个角度,例如60.
　　路径),auto-reverse为沿路径方向旋转180.也可自定义一个角度,例如60.

斜线动画

<?xml version="1.0" encoding="utf-8"?>
　　<!-- Author : Blueknight,Hangzhou,China 2000 -->
　　<svg width="100" height="100">
　　<rect width="10" height="10" style="fill: red">
　　<animate attributeName="x" from="0" to="90" dur="10s"
　　repeatCount="indefinite"/>
　　<animate attributeName="y" from="0" to="90" dur="10s"
　　repeatCount="indefinite"/>
　　</rect>
　　</svg>
　　讲解:
　　将水平动画和竖直动画复合,得到斜线动画.
　　ass=word01>　将水平动画和竖直动画复合,得到斜线动画.

水平动画

动画(1)
　　1. 水平动画
　　源代码:
　　<?xml version="1.0" encoding="utf-8"?>
　　<!-- Author : Blueknight,Hangzhou,China 2000 -->
　　<svg width="100" height="100">
　　<rect y="45" width="10" height="10" style="fill: red">
　　<animate attributeName="x" from="0" to="90" dur="10s"
　　repeatCount="indefinite"/>
　　</rect>
　　</svg>
　　讲解:
　　首先绘制一个10*10的矩形,<rect>标签,起点在(0,45)处.然后使用<animate .../>对矩形对象进行动画.attributeName决定了运动的方向,from,to决定了在该方向上的起点和终点的坐标.dur是动画的延迟时间.repeatCount用于决定循环次数.indefinite是一个不确定值,它由DOM来决定,这里默认为无限.
　　能够进行动画的元素有:
　　<svg>,<g>,<defs>,<use>,<image>,<switch>,
　　<path>,<rect>,<circle>,<ellipse>,<line>,
　　<polyline>,<polygon>,<text>,<clipPath>,
　　<mask>,<a>,<foreignObject>