怎么利用HTML的SVG的animate元素创建SMIL声明式的属性变化动画-html教程-PHP中文网

在现代浏览器中已废弃，Chrome 102+、Firefox 86+、Safari 16.4+ 移除SMIL动画支持，因其与CSS动画和Web Animations API重叠且存在安全性能隐患；应改用CSS @keyframes或Web Animations API替代。

怎么利用html的svg的animate元素创建smil声明式的属性变化动画

在现代浏览器中基本不可用——Chrome 102+、Firefox 86+、Safari 16.4+ 已移除对 SMIL 动画（包括、等）的支持。这不是兼容性问题，是标准层面的废弃。

为什么现在会静默失效

SMIL 动画被移除的核心原因是：与 CSS 动画和 Web Animations API 重叠，维护成本高，且存在安全与性能隐患（如通过 href 引用外部 SVG 触发动画导致信息泄露）。主流浏览器统一转向更可控、可脚本化、可组合的动画机制。

常见现象：
- 页面里写了，但圆点完全不动
- DevTools 中能看到元素，但 animation 层无任何记录
- 控制台不报错，也不警告——就是没效果

替代方案：用 CSS `@keyframes` + `transform` 控制 SVG 属性

绝大多数场景（位置、缩放、旋转、不透明度）可用 CSS 替代，关键是把目标属性映射到支持 CSS 动画的样式上：

坐标类（cx、cy、x、y）→ 改用 transform: translate()（需设 transform-origin 配合）
缩放（scale）→ transform: scale()
旋转（rotate）→ transform: rotate()
opacity → 直接用 opacity CSS 属性
颜色（fill、stroke）→ 可直接动画，但注意仅支持颜色关键字、十六进制、rgb() 等可插值格式

示例：原 SMIL 的圆心移动动画

<circle cx="50" cy="50" r="20" fill="steelblue"><animate attributename="cx" values="50;150;50" dur="2s" repeatcount="indefinite"></animate></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"></circle>

需要精确控制 SVG 原生属性时，用 Web Animations API

如果必须动画 r、rx、points 这类**无法用 CSS 映射**的属性，或需动态计算、暂停/播放/反转，就得用 JS：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

element.animate() 只能动画 CSS 属性，不能直接改 SVG 原生属性
正确做法：用 requestAnimationFrame 或 animate() 配合 setAttribute()
推荐封装成小函数，避免手动写时间循环

示例：动画的半径

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()
的矩阵叠加逻辑复杂，CSS transform 是覆盖式，多层动画需合并为单个 transform: translate() rotate() scale() 字符串