SVG SMIL动画通过等标签实现，但Chrome/Firefox已弃用，仅Safari部分支持；推荐改用CSS动画或JavaScript库如GSAP。
SVG 中的 SMIL 动画是通过在 SVG 元素内部嵌入
基础 animate 标签写法
最常用的是 x、opacity、fill 等）变化：
关键属性说明：
-
attributeName：要动画的属性名，必须拼写准确（如
cx对圆心，stroke-width要写成strokeWidth） -
from / to：起始与结束值；也可用
values="0;100;0"实现多段关键帧 -
dur：持续时间，支持
"2s"或"300ms" -
begin：延迟启动，如
"1s"或"click"（点击触发） - fill="freeze"：动画结束后保持最终状态（否则恢复初始值）
animateTransform 做旋转/缩放/平移
当需要动画变换（transform）时，不能直接用
说明：
-
type 可选
translate、scale、rotate、skewX、skewY -
from/to 格式依 type 而定：
•rotate：角度 + 中心 x + 中心 y（如"0 150 100"）
•translate：两个数值"20 30"
•scale：单数（等比）或双数"1.5"/"1.2 0.8"
用
如果不需要过渡效果，只希望在某时刻“瞬间”改变属性（比如点击后变色），用
特点：
- 无
dur、from、to，只有attributeName和to - 常配合事件触发（
begin="click"、begin="mouseover"） - 适合 UI 反馈类交互，不占渲染资源
兼容性提醒与替代建议
SMIL 动画虽写法简洁，但实际项目中需谨慎：
- Chrome 从 v100+、Firefox 从 v115+ 已完全禁用内联 SMIL（
- Safari 当前（v17+）仍支持，但 W3C 已将其标记为“deprecated”
- 若必须用原生方案，可将动画逻辑迁移到 CSS：
.my-circle { animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 复杂交互动画推荐 JavaScript 库：GSAP（支持 SVG 属性精细控制）、anime.js、或原生 Web Animations API
