在现代浏览器中已废弃，Chrome 102+、Firefox 86+、Safari 16.4+ 移除SMIL动画支持，因其与CSS动画和Web Animations API重叠且存在安全性能隐患；应改用CSS @keyframes或Web Animations API替代。
<animate></animate> 在现代浏览器中基本不可用——Chrome 102+、Firefox 86+、Safari 16.4+ 已移除对 SMIL 动画（包括 <animate></animate>、<animatetransform></animatetransform> 等）的支持。这不是兼容性问题，是标准层面的废弃。
为什么 <animate></animate> 现在会静默失效
SMIL 动画被移除的核心原因是：与 CSS 动画和 Web Animations API 重叠，维护成本高，且存在安全与性能隐患（如通过 href 引用外部 SVG 触发动画导致信息泄露）。主流浏览器统一转向更可控、可脚本化、可组合的动画机制。
常见现象：
- 页面里写了 <animate attributename="cx" values="50;150;50" dur="2s" repeatcount="indefinite"></animate>，但圆点完全不动
- DevTools 中能看到元素，但 animation 层无任何记录
- 控制台不报错，也不警告——就是没效果
替代方案：用 CSS @keyframes + transform 控制 SVG 属性
绝大多数 <animate></animate> 场景（位置、缩放、旋转、不透明度）可用 CSS 替代，关键是把目标属性映射到支持 CSS 动画的样式上：
- 坐标类（
cx、cy、x、y）→ 改用transform: translate()（需设transform-origin配合） - 缩放（
scale）→transform: scale() - 旋转（
rotate）→transform: rotate() -
opacity→ 直接用opacityCSS 属性 - 颜色（
fill、stroke）→ 可直接动画，但注意仅支持颜色关键字、十六进制、rgb() 等可插值格式
示例：原 SMIL 的圆心移动动画
立即学习“前端免费学习笔记（深入）”；
<circle cx="50" cy="50" r="20" fill="steelblue"> <animate attributeName="cx" values="50;150;50" dur="2s" repeatCount="indefinite"/> </circle>
等价 CSS 写法：
<style>
.animated-circle {
animation: moveX 2s infinite;
}
@keyframes moveX {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(100px); }
}
</style>
<circle class="animated-circle" cx="50" cy="50" r="20" fill="steelblue"/>需要精确控制 SVG 原生属性时，用 Web Animations API
如果必须动画 r、rx、points 这类**无法用 CSS 映射**的属性，或需动态计算、暂停/播放/反转，就得用 JS：
-
element.animate()只能动画 CSS 属性，不能直接改 SVG 原生属性 - 正确做法：用
requestAnimationFrame或animate()配合setAttribute() - 推荐封装成小函数，避免手动写时间循环
示例：动画 <circle></circle> 的半径
const circle = document.querySelector('circle');
circle.animate(
[{ r: '20' }, { r: '60' }],
{ duration: 2000, iterations: Infinity, direction: 'alternate' }
);⚠️ 注意：animate() 对 SVG 属性的支持依赖浏览器实现，Chrome/Firefox 当前仅支持部分属性（r、cx、cy 等基础数值属性），points 或 d 仍需手动插值 + setAttribute()。
迁移时最容易忽略的三个细节
SMIL 里习以为常的行为，在 CSS/JS 方案中并不自动继承：
-
calcMode="paced"没有直接对应——CSS@keyframes默认线性插值，要匀速运动得用animation-timing-function: linear，但路径长度感知需自己算 -
begin="click"这类事件触发，CSS 无法响应，必须用 JS 绑定addEventListener('click', ...)后调用el.classList.add('animate')或el.animate() -
<animatetransform></animatetransform>的矩阵叠加逻辑复杂，CSStransform是覆盖式，多层动画需合并为单个transform: translate() rotate() scale()字符串
真正棘手的不是“怎么动”，而是“动得和原来一样”——尤其是带 keyTimes、additive、accumulate 的老 SVG 动画，几乎都要重写逻辑。
