svg smil动画通过等标签实现，但chrome/firefox已弃用，仅safari部分支持；推荐改用css动画或javascript库如gsap。
SVG 中的 SMIL 动画是通过在 SVG 元素内部嵌入 <animate></animate>、<animatetransform></animatetransform>、<animatecolor></animatecolor>（已废弃）等标签实现的，直接用 XML 语法控制属性随时间变化。它原生支持、无需 JS、语义清晰，但注意：现代 Chrome/Firefox 已**移除对 SVG 内联 SMIL 的支持**（2024 年起全面弃用），仅 Safari 仍部分支持；生产环境推荐改用 CSS 动画或 JavaScript（如 GSAP、SVG.js）。
基础 animate 标签写法
最常用的是 <animate></animate>，用于驱动某个数值型属性（如 x、opacity、fill 等）变化：
<rect x="50" y="50" width="100" height="60" fill="#4a90e2">
<animate
attributeName="x"
from="50" to="200"
dur="2s"
repeatCount="indefinite"
begin="0s"
fill="freeze" />
</rect>
关键属性说明：
-
attributeName：要动画的属性名，必须拼写准确（如
cx对圆心，stroke-width要写成strokeWidth） -
from / to：起始与结束值；也可用
values="0;100;0"实现多段关键帧 -
dur：持续时间，支持
"2s"或"300ms" -
begin：延迟启动，如
"1s"或"click"（点击触发） - fill="freeze"：动画结束后保持最终状态（否则恢复初始值）
animateTransform 做旋转/缩放/平移
当需要动画变换（transform）时，不能直接用 <animate attributename="transform"></animate>（不合法），必须用 <animatetransform></animatetransform>：
<circle cx="150" cy="100" r="30" fill="#e74c3c">
<animateTransform
attributeName="transform"
type="rotate"
from="0 150 100"
to="360 150 100"
dur="3s"
repeatCount="indefinite" />
</circle>
说明：
-
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"
用 <set></set> 实现纯状态切换
如果不需要过渡效果，只希望在某时刻“瞬间”改变属性（比如点击后变色），用 <set></set> 更轻量：
<path d="M10 10 L90 90" stroke="#3498db" stroke-width="2"> <set attributeName="stroke" to="#e74c3c" begin="click" /> </path>
特点：
- 无
dur、from、to，只有attributeName和to - 常配合事件触发（
begin="click"、begin="mouseover"） - 适合 UI 反馈类交互，不占渲染资源
兼容性提醒与替代建议
SMIL 动画虽写法简洁，但实际项目中需谨慎：
- Chrome 从 v100+、Firefox 从 v115+ 已完全禁用内联 SMIL（
<animate></animate>在 SVG 内被忽略） - Safari 当前（v17+）仍支持，但 W3C 已将其标记为“deprecated”
- 若必须用原生方案，可将动画逻辑迁移到 CSS：
.my-circle { animation: spin 3s linear infinite; }<br> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 复杂交互动画推荐 JavaScript 库：GSAP（支持 SVG 属性精细控制）、anime.js、或原生 Web Animations API
