SVG的SMIL动画通过<animate>、<animateTransform>、<animateMotion>等标签实现位移、旋转、缩放、颜色及路径运动，需设置attributeName、from/to或values、dur等属性，并注意浏览器兼容性与格式一致性。
SVG自带的SMIL动画能力，能让图形元素在不依赖JavaScript的情况下实现位移、缩放、旋转、颜色变化等基础动效，关键在于正确使用<animate>、<animateTransform>、<animateColor>（已废弃，改用<animate>配合attributeName="fill"）等标签。
核心动画标签与常用属性
SMIL动画通过嵌套在SVG元素内部的动画标签来驱动。最常用的是<animate>，它能控制任意可动画属性；<animateTransform>专用于transform类操作（如rotate、scale、translate），避免字符串拼接错误；<set>则适合做瞬时状态切换（比如点击后立刻变色）。
-
必要属性：必须指定
attributeName（目标属性名）、from/to或values（起止值或关键帧序列）、dur（持续时间，如"2s"） -
控制节奏：用
repeatCount（如"indefinite"循环）、begin（延迟或事件触发，如"click"、"0s"、"2s"）、fill="freeze"让动画结束后保持最终状态 -
注意兼容性：Chrome、Firefox、Safari均支持，但IE仅部分支持；现代项目需留意部分浏览器对
animateTransform嵌套层级的限制
位移与路径运动动画
让元素沿直线移动，直接用<animate attributeName="cx" />修改圆心X坐标即可；若需复杂轨迹，可用<animateMotion>配合<mpath>引用<path>定义的路径。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 简单平移示例：
<circle cx="50" cy="50"><animate attributeName="cx" from="50" to="200" dur="1.5s" fill="freeze"/></circle> - 路径运动示例：先定义
<path id="track" d="M10,10 Q100,50 200,10"/>，再在<circle>内写<animateMotion dur="3s" repeatCount="indefinite"><mpath href="#track"/></animateMotion> -
keyPoints和keyTimes可控制路径上各段的速度分布，实现缓动效果
变换动画（旋转/缩放/倾斜）
用<animateTransform>比拼接transform字符串更安全可靠，尤其适合多步变换叠加场景。
- 旋转：设置
type="rotate"，from="0 100 100"表示绕(100,100)点从0°转到360° - 缩放：
type="scale"，from="1"→to="1.5"即等比放大50% - 组合多个
<animateTransform>时，它们会按顺序执行，且各自独立控制时序
颜色与透明度渐变
填充色、描边色、不透明度均可动画。注意颜色值需用十六进制、rgb()或命名色格式，且起止值格式要一致。
- 填色变化：
<rect fill="red"><animate attributeName="fill" from="red" to="blue" dur="1s"/></rect> - 透明度控制：
<animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/> - 避免使用
hsl()或渐变色ID作为from/to值——浏览器可能无法插值，建议统一用十六进制
不复杂但容易忽略。
