SVG 矢量动画

矢量图形动画原理：stroke-dasharray 描边、路径插值变形、遮罩与渐变，用 Path2D 在画布上逐帧复现，悬停读出路径数值。

技术栈: Path2D, stroke-dashoffset, path morph, Canvas 2D

• 路径描边动画 — 利用 getTotalLength 实现手写描边。
• 形状变形 — 同构路径点插值，平滑形变。
• 动画图标 — 菜单/关闭、播放/暂停、加载、对勾等图标动效。
• 描边路径 — SVG stroke-dash 描边。
• 图标动效 — SVG 图标状态切换。
• SMIL / CSS 动画 — SVG 声明式动画。
• 虚线流转 — stroke-dashoffset 循环。
• 文字描边 — SVG 文字路径描边。
• 环形进度 — SVG 圆环进度。
• SVG 滤镜 — feGaussianBlur 等。
• 遮罩 — SVG mask/clipPath。
• 路径跟随 — 物体沿 path 运动。
• SVG 团块 — path 插值有机形。
• 图表描出 — 折线图本质是一条 <polyline> / <path>，面积图是在折线下方补成封闭区域再填充。
• 图标精灵 — SVG sprite / use。
• 渐变动画 — linear/radialGradient 动画。
• 线条生长 — 每条线是一条二次贝塞尔曲线 <path d="M 中心 Q 控制点 终点">。
• 勾选变形 — 复选框从「空心方框」变成「实心圆角 + 对勾」：圆角半径 rx 变大、填充从透明变成实色、对勾用 dasho…
• SVG 加载弧 — 一个 <circle> 只描出一段弧（dasharray = 弧长 + 剩余周长），再用 animateTr…
• 菜单变形 — 汉堡菜单 ☰ 是三条 <line>。