SVG中的animateMotion元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/05/SVG%E4%B8%AD%E7%9A%84animateMotion%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

让元素沿指定路径运动

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="10" height="10">
        <animateMotion from="0 0" to="100 100" dur="5" begin="1" fill="freeze"/>
    </rect>
</svg>

attribute

from

直线运动的起点坐标

to

直线运动的终点坐标

path

运动路径

dur

动画的持续时间

如果没有时间单位，默认为s

fill

动画结束后的状态

freeze 保持最后一帧
remove 保持第一帧

默认值为remove

repeatCount

动画的重复次数

正整数
indefinitely 无穷地

repeatDur

重复动画的总持续时间

具体时间
indefinite 无穷的

如果同时指定repeatCount和repeatDur，则哪个属性指定的时间更短就用哪个。例如：重复 3 次，每次 3 秒，但总持续时间只有 8 秒，则以 8 秒为准。

rotate

运动时，元素的旋转角度

示例：只有在转向时，元素会自动旋转

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="10" height="20">
        <animateMotion path="M 0 0 L 300 0 300 150 0 150 Z" dur="5" rotate="auto"/>
    </rect>
</svg>

示例：元素处在顺时针旋转 45 度的状态下进行运动，转向时也不例外

注：Chrome、Edg 不支持，请使用 Firefox 打开

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="10" height="20">
        <animateMotion path="M 0 0 L 300 0 300 150 0 150 Z" dur="5" rotate="45"/>
    </rect>
</svg>