直接内联才能实现可控SVG动画，因将SVG当作位图快照处理，DOM不可见、CSS/JS无法选择元素、@keyframes失效；而内联SVG支持stroke-dasharray/dashoffset路径绘制、CSS transform动画及JS动态控制。
直接内联 <svg></svg> 才能做真正可控的 SVG 动画，用 <img src="xxx.svg"> 就等于放弃所有动画能力。
为什么 <img> 加载 SVG 不能动
浏览器把 <img> 中的 SVG 当作一张图处理：DOM 里看不到 <path></path>、<circle></circle>，CSS 选不到，JS 查不到，@keyframes 更是完全失效。你看到的只是个位图快照。
- 想改颜色？不行 —— 没有可选中的元素
- 想加 hover 效果？不行 —— 样式无法穿透
- 想用 JS 控制路径绘制？不行 ——
document.querySelector('path')返回null
stroke-dasharray + stroke-dashoffset 实现路径“画线”动画
这是目前最稳定、兼容性最好的 SVG 路径动画方案，Chrome、Firefox、Safari（9.1+）、Edge 都支持，且性能好。
- 必须先获取真实路径长度：
pathEl.getTotalLength()，不能靠估算或getBBox() - 设
stroke-dasharray和初始stroke-dashoffset都为该长度值 - CSS 动画只动
stroke-dashoffset：从总长度 → 0 - 记得加
fill="none"，否则填充会盖住描边动画
示例片段：
<svg viewbox="0 0 100 100"><path id="myPath" d="M10,10 L90,10 L90,90 Z" stroke="#3498db" stroke-width="2" fill="none"></path></svg>
JS 获取长度并注入 CSS 变量：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const path = document.getElementById('myPath');
const len = path.getTotalLength();
path.style.setProperty('--path-len', len);
CSS 中使用：
.draw {
stroke-dasharray: var(--path-len);
stroke-dashoffset: var(--path-len);
animation: draw 1.5s ease-in-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
用 CSS transform 动 <g></g> 或 <circle></circle> 更简单
对分组、圆形、矩形这类元素，直接用 CSS transform + transition 或 @keyframes 是最快路径，无需 JS 计算。
- 给
<g class="spin-group"></g>加transform: rotate(0deg)→rotate(360deg) - 对
<circle></circle>改cx/cy不推荐 —— 这不是可动画 CSS 属性，应改transform: translate(x, y) - 避免在 SVG 元素上写
style="animation: ..."，不利于复用和状态管理 - 需要响应点击或滚动时，优先用 JS 修改
element.setAttribute('transform', '...')，注意顺序影响结果（如scale在translate前后效果不同）
SMIL 动画（<set></set> / <animate></animate>）现在还能用吗
可以，但不建议新项目用。Chromium 和 Firefox 支持尚可，Safari 对 animateTransform 等支持弱，且 SMIL 已被 W3C 标记为“废弃”。
-
<set attributename="r" to="50" begin="2s"></set>这类一次性赋值还能跑，但别指望它在 Safari 里可靠执行 -
<animatetransform></animatetransform>在 Safari 中常失效，尤其是嵌套<g></g>内的 transform - 如果必须兼容老系统（如某些内网 IE），得降级到 JS 驱动或用
requestAnimationFrame手动插值
路径长度计算、transform 顺序、CSS vs SMIL 的兼容边界——这些地方一错，动画就卡顿、跳变或干脆不动。动手前先确认目标浏览器版本和动画粒度需求，比盲目套模板更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
