用途：为 SVG 添加动画。每种 SVG 元素都是可样式化、可动画、可脚本化的 DOM 节点，关键在于选择合适的动画层并规避常见坑。
主要能力：支持 SMIL（<animate>、<animateTransform>、<animateMotion>、<set>）、CSS 关键帧、描边绘制、形状变形、沿路径运动、渐变色变化、脉冲发光、波浪等。需要现成模式时可查阅 references/recipes.md，包含加载指示器、动画勾选、汉堡菜单变形为叉、路径运动、渐变位移、脉冲光晕、波浪等。
选择动画层：SMIL 写在 SVG 标记内部，当文件通过 <img> 或 CSS background-image 加载时仍可工作，而 CSS 和 JS 无法触及，因此自包含资源（图标、Logo）优先用 SMIL；SVG 内联且动画需与页面其余部分协同时应使用 CSS 关键帧。
常见坑：SVG transform 默认以 viewBox 原点 (0,0) 为transform-origin，而非元素中心，需在 CSS 中显式设置，或在 SMIL 中传入明确中心坐标（from="0 25 25" to="360 25 25"）。SMIL 动画的 fill="freeze" 可保留最终状态，否则元素会弹回起点。形状变形（SMIL 对 d 使用 values，或 CSS d 属性）仅在同数量、同类型、同顺序的命令路径间插值，形状不同时需添加不可见中间点使其一致。描边绘制动画应使用 path.getTotalLength() 获得精确长度而非猜测 dash 值。仅用 viewBox 定尺寸，硬编码 width/height 会破坏分辨率独立性；渐变、滤镜、遮罩和可复用形状放入 <defs>。stroke-linecap="round" 让线条动画更精致。
描边绘制技巧：将 stroke-dasharray 和 stroke-dashoffset 设为路径长度，再把 offset 动画到 0，路径即自行绘制；多条路径可用 animation-delay 错开。
SMIL 计时与缓动：通过 id 链接动画而非手动累加延迟，begin 还接受 click、2s、other.end + 1s、other.repeat(2)。缓动使用 calcMode="spline" 与 keySplines 每区间三次贝塞尔控制点（ease-in-out 为 0.42 0 0.58 1），默认线性。
性能与可访问性：动画 transform 与 opacity 由 GPU 合成；动画 d、points 或布局属性会触发重绘，复杂 SVG 上应少用，will-change: transform 有助于浏览器优化合成。添加 role="img" 与 <title>/<desc>，并尊重减少动态效果：@media (prefers-reduced-motion: reduce) { svg * { animation: none !important; transition: none !important; } }。