HTML5通过内联<svg>标签实现SVG动画，而非<img>引用；需用CSS/JS控制内联SVG的DOM元素，避免SMIL兼容性问题，注意内联、显示状态和容器溢出等上下文陷阱。
HTML5 本身不提供“嵌入 SVG 动画”的专用标签，真正起作用的是 <svg> 元素本身 + 正确的动画实现方式。直接内联 SVG（而非用 <img> 或 <iframe> 引入）才能触发 CSS/JS 控制和 SMIL（已废弃）或现代动画逻辑。
用 <svg> 标签内联写 SVG，别用 <img src="xxx.svg">
这是最关键的一步。用 <img> 加载 SVG 会将其当作位图处理，CSS 选择器无法穿透、JS 无法访问内部元素、@keyframes 无法作用于其中的 <path> 或 <circle> —— 动画根本不会生效。
正确做法是把 SVG 源码直接贴进 HTML：
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="40" fill="#3498db">
<animate attributeName="r" values="40;60;40" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
-
<animate>是 SMIL 动画，目前仅 Chromium 和 Firefox 支持较好，Safari 对部分属性支持弱（如transform） - 若需全浏览器兼容，优先用 CSS 动画或 JS 驱动
- 内联后，SVG 元素成为 DOM 的一部分，可被
document.querySelector('circle')获取
CSS 动画控制 SVG 内部元素（推荐）
对 <path>、<rect>、<g> 等加 class，再用 @keyframes 动画其 transform、opacity、stroke-dasharray 等可动画属性。
立即学习“前端免费学习笔记（深入）”；
例如实现描边动画：
<svg viewBox="0 0 100 100"> <path class="draw" d="M10,10 L90,10 L90,90 Z" stroke="#e74c3c" fill="none" stroke-width="2"/> </svg>
.draw {
stroke-dasharray: 280;
stroke-dashoffset: 280;
animation: draw 2s ease-in-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
-
stroke-dasharray必须等于路径总长度（可用getTotalLength()测量），否则动画卡顿或不完整 - 不要对
fill或stroke颜色做 CSS 过渡——部分浏览器渲染异常，改用transition: color并设color为继承源更稳 - 避免在 SVG 上直接写
style="animation: ..."，不利于复用和 JS 控制
用 JavaScript 驱动 SVG 动画（适合复杂交互）
当需要响应点击、滚动、数据变化时，JS 是最灵活的选择。核心是操作 SVG DOM 属性（不是 HTML 属性）：
- 修改
transform：用element.setAttribute('transform', 'translate(50,0) rotate(10)')，注意顺序影响结果 - 动画数值：用
requestAnimationFrame替代setTimeout，避免掉帧；或用 GSAP、anime.js 等库处理缓动和队列 - 路径动画：对
<path>调用getTotalLength()后，动态设置stroke-dashoffset实现“绘制”效果 - 别用
.style.transform设置 SVG 元素——它不识别，必须用setAttribute('transform', ...)
SVG 动画的坑不在语法，而在上下文：是否内联、是否在 Shadow DOM 里、是否被 display: none 暂停、父容器是否设置了 overflow: hidden 截断动画区域——这些细节比“怎么写动画”更容易导致失败。
