SVG动画首选CSS transform，兼容性好性能稳；SMIL已逐步废弃，仅老系统或复杂路径动画时考虑；内联SVG才支持外部CSS控制，注意单位和选择器作用域。
SVG里怎么让元素动起来
直接用 CSS 动画或 SMIL（原生 SVG 动画）最轻量，但得看浏览器支持情况。现代项目优先用 CSS + transform，兼容性好、性能稳；老系统要支持 IE 或需要复杂路径动画时，才考虑 SMIL（比如 <animate> 标签），不过 Chrome 100+ 已废弃部分 SMIL 支持，别默认它能跑。
-
transform动画必须加style="transform: translate(0, 0)"或初始transform值，否则某些浏览器（如 Safari）可能不触发硬件加速 -
SMIL的begin="click"在移动端可能响应延迟，建议改用 JS 触发beginElement() - 避免对
<g>大量嵌套做transform动画——重绘区域大，卡顿明显；优先动单个<path>或加will-change: transform
CSS 动画写在 SVG 外部样式表里行不行
可以，但要注意选择器作用域和单位解析问题。SVG 内部的 px、em 行为和 HTML 不完全一致，尤其 font-size 和 viewBox 共同影响缩放时，CSS 中写的 10px 可能被等比压缩。
- 推荐用无单位数值（如
transform: translate(20, 0)）或vw/vh，避开px依赖 - 如果 SVG 是内联（
<svg>...</svg>），CSS 选择器可直接写svg path:hover；如果是<img src="icon.svg">，就完全无法用外部 CSS 控制内部元素 -
@keyframes定义在<style>标签内比外链更可靠，避免加载顺序导致动画不触发
JS 控制 SVG 动画时常见报错
最常遇到的是 Cannot animate property 'd' with CSS 或调用 beginElement() 报 undefined ——本质是 DOM 没就绪或元素没绑定动画节点。
- 确保 JS 执行在
DOMContentLoaded后，或把脚本放</svg>后面 -
<animate>必须有attributeName（如"d"、"fill"），不能只写attributeType="XML"就完事 - 用 JS 修改
<path>的d属性时，别直接赋值字符串：用el.setAttribute("d", newPath)，而不是el.d = newPath（后者无效） - 想用 GSAP 或 Framer Motion 驱动 SVG 路径，注意它们默认不识别
stroke-dasharray等 SVG 特有属性，需手动注册插件或用set()配合attr:{}
SVG 动画在高 DPI 屏幕上模糊怎么办
不是动画的问题，是 SVG 渲染时被当作位图拉伸了。根源常出在 width/height 属性和 viewBox 不匹配，或 CSS 强制设置了非整数尺寸。
立即学习“前端免费学习笔记（深入）”；
- 删掉 SVG 根元素上的
width和height属性，只留viewBox，让容器控制大小 - 如果必须设宽高，用 CSS 写
width: 100%; height: auto;，并确保父容器宽度是整数像素（可用round()JS 计算后设置） - 动画中避免
scale(0.99)这类非整数缩放，会触发亚像素渲染；改用transform: scale(1)+ 位移模拟
