animateMotion 元素

2025 年 3 月 17 日 | 阅读 1 分钟

<animateMotion> 元素用于沿单行路径以及任意路径对对象进行动画处理。

示例

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<g>
<rect x="0" y="0" width="30" height="30" style="fill: gray; stroke: black"/>
<circle cx="30" cy="30" r="15" style="fill: red; stroke: black;"/>
<animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
</g>

</svg>
</body>
</html>

立即测试

沿复杂路径的动画

如果您希望沿更复杂的路径进行动画处理，请使用 path 属性，并使用与 <path> 元素中 "d" 属性相同的格式作为其值。

示例

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width=500 height="500">

<path d="M50,125 C 100,25 150,225, 200, 125"
 style="fill: none; stroke: green;"/>
<path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: black;">
<animateMotion
 path="M50,125 C 100,25 150,225, 200, 125"
 dur="6s" fill="freeze"/>
</path>

</svg>
</body>
</html>

立即测试

下一个主题SVG 中的链接

← 上一个下一个 →

animateMotion 元素

示例

沿复杂路径的动画

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

SVG 教程

SVG 效果

SVG 渐变

SVG 动画

SVG 滤镜

转换

面试题

animateMotion 元素

示例

沿复杂路径的动画

示例

相关帖子

重复动作

时间如何测量

SVG 动画

Set 元素

animateTransform

SVG 中的链接

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器