svg之 animateMotion 路径动画（二）

马黑黑 · 发表于 2023-12-13 09:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-12-13 09:37 编辑

svg之 animateMotion 路径动画（二）

本节，先讲讲 <animateMotion> 元素的 mpath 子元素，它使 <animateMotion> 元素能够引用一个外部的元素作为运动路径的定义。如此，animateMotion的path属性可以休息，将路径定义的工作交由animateMotion的子元素 mpath 负责。以下效果与上节（一）的示例完全一样，只是，你从后面提供的代码中可以发现，我们用了 mpath 子元素来描述运动路径，而外部路径我们用淡蓝色做了填充：

上面的代码我尝试采用 ol+li 即有序列表实现带行号的代码展现机制，长代码行不好再人工折行（但它会根据浏览器的宽度尺寸自动折行），给阅读带来一定困扰。为方便理解 mpath 子元素，我将上述代码抽离出主干结构，可对照上述代码加以理解：

mpath的作用和animateMotion中的path属性一样，都是为animateMotion指定运动路径。由于路径可能很长，所以svg的开发者创建了mpath子元素，用于避免元素的属性表达过长的现象。

接下来我们讲讲动画标签与驱动对象标签的代码分离。animateMotion 和 animate、animateTransform 一样，标签可以游离于运动对象即元素之外，通过元素的 id 来识别并对之驱动。代码结构举例如下：

上述结构性的代码，我们首先给矩形 rect 赋予一个 id，然后在 animateMotion 代码内部加一个 xlink:href 属性，其属性值指向矩形 id。这里，id 与 animateMotion 子元素 mpath 没有直接关系，它具体负责的仅是路径，它的 xlink:href 属性指向路径 id。

最后，我们用上述结构改造一下本节开头给出的示例代码，请看效果和代码：