svg中标签可实现无需js的声明式动画，需嵌套在目标元素内，必设attributename、from/to、dur；支持click触发、indefinite循环、fill="freeze"保持终态，兼容现代浏览器但ie不支持。
js的纯声明式动画">
在 SVG 中直接用 <animate></animate> 标签就能实现无需 JavaScript 的纯声明式动画，关键在于正确设置属性、时间控制和目标绑定。
基础语法与必要属性
<animate></animate> 必须嵌套在被动画的 SVG 元素内部（如 <circle></circle>、<rect></rect>），且至少要指定四个核心属性：
-
attributeName：要变化的 SVG 属性名，比如
"cx"、"fill"、"opacity"（注意不是 CSS 属性） -
from 和 to：起始值和结束值，例如
from="10"to="200" -
dur：动画持续时间，支持单位如
"2s"或"500ms"
示例：让一个圆心水平移动
循环、重复与播放控制
仅一次播放通常不够，可通过以下属性扩展行为：
-
repeatCount：设为
"indefinite"实现无限循环；或填数字如"3" -
begin：定义动画开始时机，支持
"0s"、"2s"，甚至相对触发如"click"或"button.click" -
fill：设为
"freeze"可让动画结束后保持最终状态（默认是恢复原值） -
restart：可选
"always"（默认）、"whenNotActive"或"never"
例如点击后启动、循环播放、停在终点：
支持的关键动画类型
<animate></animate> 不仅能动数值，还能处理颜色、路径、变换等：
-
颜色动画：
attributeName="fill"，from="#f00"→to="#00f" -
透明度：
attributeName="opacity"，from="0.3"→to="1" -
路径变形（需同结构）：
attributeName="d"，两个<path></path>的d值必须有相同命令数和参数类型（如 M L L Z ↔ M L L Z） -
旋转变换：需配合
<g></g>和transform，但注意要用attributeName="transform"+type="rotate"，并指定from="0"to="360"
旋转示例：
兼容性与实用提醒
现代浏览器（Chrome/Firefox/Safari/Edge）均支持 <animate></animate>，但要注意：
- 不支持 CSS 自定义属性（
--my-color），只作用于原生 SVG 属性 - IE 完全不支持，如需兼容需降级方案（如 SMIL 移除后改用 CSS @keyframes + SVG 的 class 切换）
- 动画可与其他 SVG 动画标签组合，如
<set></set>（瞬间赋值）、<animatetransform></animatetransform>（专用变换，推荐用于 scale/rotate/skew） - 调试技巧：把
dur设很大（如"30s"），方便肉眼观察过程
不复杂但容易忽略。
