HTML5通过内联标签实现SVG动画，而非引用；需用CSS/JS控制内联SVG的DOM元素，避免SMIL兼容性问题，注意内联、显示状态和容器溢出等上下文陷阱。
HTML5 本身不提供“嵌入 SVG 动画”的专用标签，真正起作用的是 元素本身 + 正确的动画实现方式。直接内联 SVG（而非用 引入）才能触发 CSS/JS 控制和 SMIL（已废弃）或现代动画逻辑。
用 
这是最关键的一步。用 @keyframes 无法作用于其中的
正确做法是把 SVG 源码直接贴进 HTML：
-
transform） - 若需全浏览器兼容，优先用 CSS 动画或 JS 驱动
- 内联后，SVG 元素成为 DOM 的一部分，可被
document.querySelector('circle')获取
CSS 动画控制 SVG 内部元素（推荐）
对 @keyframes 动画其 transform、opacity、stroke-dasharray 等可动画属性。
立即学习“前端免费学习笔记（深入）”；
例如实现描边动画：
.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 等库处理缓动和队列 - 路径动画：对
getTotalLength()后，动态设置stroke-dashoffset实现“绘制”效果 - 别用
.style.transform设置 SVG 元素——它不识别，必须用setAttribute('transform', ...)
SVG 动画的坑不在语法，而在上下文：是否内联、是否在 Shadow DOM 里、是否被 display: none 暂停、父容器是否设置了 overflow: hidden 截断动画区域——这些细节比“怎么写动画”更容易导致失败。
