本文将介绍如何使用 smil（synchronized multimedia integration language）和 `
代码解释：
- 定义了 SVG 画布，并设置了 viewBox 属性，以便更好地控制 SVG 的缩放和比例。
-
元素: 定义了一个半径为 25 的蓝色圆形。 -
元素: 这是实现动画的关键。- dur="20s": 设置动画的持续时间为 20 秒。
- fill="freeze": 指定动画结束后，圆形停留在动画的最后一帧。如果不设置此属性，圆形将返回到动画的起始位置。
- path="...": 定义了圆形运动的路径。这是一个 SVG 路径字符串，描述了椭圆的形状。
CSS 样式:
svg {
height: 90vh;
}这段 CSS 代码设置了 SVG 元素的高度，使其占据浏览器视口高度的 90%。
SMIL 的浏览器支持
SMIL 具有良好的浏览器支持，即使 Chrome 曾经弃用，后来又重新支持了它。它甚至可以在 标签中使用，并且在许多浏览器中可以作为 CSS 的 background-image 使用。
进一步学习
- CSS-Tricks 的 SVG 动画指南： https://www.php.cn/link/e1d96dd51f6c61a48b3af39333626766
- MDN Web Docs 的 SVG 动画文档： https://www.php.cn/link/4d5c3e59543d48a0ea6152d4bad9a10d
总结：
通过使用 SMIL 和
