描边、原点、路径变形与分层

来源：animate/svg-animation.md，补齐总纲引用但没有独立 skill 目录的 SVG 模块。

A.1 坐标与相机

ViewBox="minX minY width height" 定义用户坐标可视区域，显示宽高与 preserveAspectRatio 决定怎样映射到屏幕。SVG 图形不按普通文档流排布，未定位图形可能堆在原点。改显示尺寸不必重写所有路径坐标。

A.2 路径命令与闭合

M 移动起点，L 画线，Z 闭合；大写绝对坐标，小写相对坐标。原文“总是用 Z”应纠正为：需要闭合的形状明确闭合；折线、轨迹、勾号通常故意开放，不能随意加一条回起点的线。开放路径的填充与描边闭合行为不同。

A.3 零几何与透明不同

R=0、宽度为0、重合端点等退化几何与 opacity:0 不是同一回事；具体绘制还受 stroke、linecap 等影响。不要依赖不稳定的退化路径作为形变端点，通常用非退化几何配透明度更可控。

A.4 描边绘制的机制

把 dash 长度设成整条路径，dashoffset 从路径总长退到 0，像一笔画出来。PathLength="100" 可把路径长度归一化到数字 100，方便不同真实长度共用参数。百分比 dash 值还涉及 SVG 参考尺寸，不能直接认为 100% 永远等于路径总长。

<svg viewBox="0 0 100 60" role="img" aria-label="完成">
  <path class="check" pathLength="100"
        d="M 15 30 L 40 48 L 85 12"
        fill="none" stroke="currentColor" stroke-width="5" />
</svg>

.check {
  stroke-dasharray: 100 110;
  stroke-dashoffset: 0;
  animation: draw 600ms ease-out backwards;
}
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .check { animation: none; } }

普通样式就是最终状态，所以不需要 forwards；有 delay 时 backwards 覆盖等待期。Round linecap 会伸出数学端点，隐藏时可能露出小端帽；需要调整间隙/偏移，或在未开始时同时隐藏，实际逐帧验证。

A.5 多笔时序

外框先画、勾号后画，明确各自 delay 与总时长；不要让每一笔相同延迟机械出现。持续循环前先等所有路径重置完成，避免旧控制器与新一轮打架。

A.6 SVG 变换原点

SVG 与 HTML 的默认参考盒、根节点和子元素行为不同，不能笼统说所有 SVG 都固定原点为 viewBox 的 0,0。常用明确写法：

.gear { transform-box: fill-box; transform-origin: center; }
.clock-hand { transform-box: view-box; transform-origin: 50px 50px; }

前者绕自身盒子中心转，后者按整幅图坐标指定钟表中心。细线的某一维包围盒可能为零，对百分比原点需特别检查。

A.7 Motion 与 SVG

库可能为 SVG 计算独立 transform 原点。原文提出把 transformOrigin 放 initial 并设置 view-box，属于特定版本/路径的配方；不要当“style 永远会被覆盖”的恒定规则。先检查实际 DOM/computed transform、库版本与坐标系，再选择配置。

A.8 Path morphing

两条路径需要兼容的命令结构、点数量和对应顺序，才能做合理 d 插值。结构不同用路径插值器如 flubber，或者改用裁切/交叉淡化。相同点数也不保证好看：点对应错会扭结，开放/闭合拓扑也需要考虑。

A.9 抖动与衰减序列

铃铛可以用正负角度交替、幅度递减的序列；按压可用 1→0.97→1.01→1。旋转放在外层 g，内部装饰随父层运动；独立变换放不同 g，避免 transform 互相覆盖。高频循环抖动非常容易干扰，不作默认交互。

A.10 微弱生命感

营销插画可用很小的漂浮/摆动，启动稍延迟，让用户先理解界面。不同周期减少机械同步，但原文 3s 与4s 并非“永不对齐”，12s 就再次对齐。真正目标是避免短周期全体同步，不需要追求数学永不重复。装饰场景 reduce 下完全静止。

A.11 裁切与层级

Overshoot 被裁掉时检查 SVG overflow、外层裁切、viewBox 和滤镜范围；overflow:visible 不是处处安全，可能盖住邻近交互。前后遮挡按组和 DOM 绘制顺序设计，少数情况可以用 mask/clipPath；别只提高一个 CSS z-index 期待改变全部 SVG 内部绘制顺序。

A.12 性能与验收

同时运动的节点和滤镜面积比图形“看上去简单”更重要。Stroke-dashoffset 一般需要绘制，不因它是 SVG 就必然 GPU。Will-change/contain/translateZ 必须通过录制验证，不能给每条 path 预建图层；contain:paint 还可能裁切外部绘制。

自测：开放勾号要 Z 吗？不。PathLength=100 后可以用单位数字统一长度。Gear 绕整图角落转？先查 transform-box/origin。Morph 扭结？查结构与点对应，而不只延长时长。