HTML Academy · 课时

使用 CSS 和 SMIL 制作 SVG 动画

Q: 「使用 CSS 和 SMIL 制作 SVG 动画」这节课中我会学到什么？

使用 CSS 过渡和 SMIL 为 SVG 元素添加动态效果 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 过渡和 SMIL 为 SVG 元素添加动态效果

使用 CSS 和 SMIL 制作 SVG 动画 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

SVG 上的 CSS 过渡

SVG 的呈现属性（填充、描边、不透明度和变换）都可以使用 CSS 过渡进行动画处理。添加一个类并定义过渡效果：.icon { transition: fill 200ms ease; } .icon:hover { fill: red; }。CSS 过渡在 SVG 元素上的工作方式与在 HTML 元素上一致。

SVG 上的 CSS 关键帧动画

可以将 @keyframes 应用于 SVG 元素：为描边虚线偏移量设置动画可实现路径绘制效果，为不透明度设置动画可实现淡入效果，为变换设置动画可实现移动和旋转。HTML 元素使用的相同动画语法无需修改即可应用于 SVG 元素。

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

路径绘制效果

描边虚线数组和描边虚线偏移量技术可以模拟绘制路径的效果：将虚线数组设置为路径长度，将虚线偏移量设置为路径长度（使路径不可见），然后将虚线偏移量设置为 0 并播放动画。这样，描边就会从起点到终点逐渐显现，仿佛被绘制出来一样。

获取路径长度

path.getTotalLength() 返回以 SVG 用户单位表示的路径长度。请将此值同时用于描边虚线数组和初始的描边虚线偏移量。这样无论路径的复杂程度或长度如何，动画都能正确运行。

SVG 中的 CSS 变换

现代浏览器支持对 SVG 元素使用 CSS 变换。对于 SVG 元素，变换原点默认位于 SVG 的左上角，而不是像 HTML 元素那样位于元素中心。请指定 transform-box: fill-box，使变换原点相对于元素的边界框定位。

.spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotate 1s linear infinite;
}

SMIL 动画

SMIL（同步多媒体集成语言）是 SVG 内置的动画系统。动画元素会随时间改变属性值。SMIL 不需要 JavaScript 或 CSS，动画完全以声明方式定义在 SVG 标记中。

<circle r="20">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>

animateTransform

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> 使用 SMIL 语法，让元素围绕指定的中心点旋转。

animateMotion

<animateMotion> 让元素沿 SVG 路径移动。可以通过路径引用元素或内联路径数据来指定路径。元素会自动沿路径曲线移动，适合在不手动计算坐标的情况下实现复杂的运动路径。

CSS 与 SMIL 的取舍

CSS 动画：所有现代浏览器都支持，可以融入 CSS 层叠规则，并且更容易通过 JavaScript 控制（暂停、反向播放）。SMIL：动画自包含于 SVG 标记中，在无法访问 CSS 的静态 SVG 文件中也能运行，并且以声明方式表达沿路径运动的动画。

SVG 路径变形

要在两个路径形状之间进行动画变形，两个路径必须包含相同数量的命令，并且结构兼容。CSS 动画会对 d 属性进行动画处理（Chrome 88+、Firefox 72+）：@keyframes { to { d: path("M...") } } 可实现原生 CSS 路径变形。

SVG 动画的无障碍支持

添加 prefers-reduced-motion 媒体查询，为觉得动态效果不适的人禁用或简化 SVG 动画。装饰性动画应完全禁用；有实际意义的动画（例如加载状态）应简化，而不是直接停止。

知识检查

描边虚线数组和描边虚线偏移量技术如何创建路径绘制动画？

总结

SVG 动画使用 CSS 过渡和关键帧实现基于属性的效果，使用描边虚线数组与虚线偏移量技术实现路径绘制，使用 SMIL 的 animate、animateTransform 和 animateMotion 实现 SVG 内部的声明式动画，并使用 prefers-reduced-motion 提供无障碍支持。CSS 和 SMIL 可以互相补充：如果 SVG 需要融入 CSS 层叠规则，请选择 CSS；如果需要独立文件的可移植性，请选择 SMIL。

常见问题解答

「使用 CSS 和 SMIL 制作 SVG 动画」课时是免费的吗？

是的 — 「使用 CSS 和 SMIL 制作 SVG 动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「使用 CSS 和 SMIL 制作 SVG 动画」这节课中我会学到什么？

使用 CSS 过渡和 SMIL 为 SVG 元素添加动态效果你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 CSS 和 SMIL 制作 SVG 动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy