fill & stroke：描边与自绘
每个图形有两支笔：fill（填充）和 stroke（描边）。描边参数中最具代表性的是 stroke-dasharray + stroke-dashoffset——把虚线的「实线段」设成整条路径那么长，再把 dashoffset 从全长滑到
0，路径就像被一支笔逐段画出。签名、地图路线、loading 圈用的是同一原理。
1 · 路径自绘：dasharray + dashoffset
下面这条曲线的 stroke-dasharray = 它的 getTotalLength()。拖滑块就是拖 dashoffset:
原理： 一条 dasharray: L 的虚线只有「L 长的实线 + L 长的空隙」——刚好一段实线铺满全程。dashoffset 把这段实线沿路径推走：推 L 个单位时实线完全移出视野（路径隐形），推 0 时铺满（完整显示）。中间值就是「画了一半」。不知道真实长度也行：给
<path pathLength="100"> 把路径长归一化成 100，直接按百分比算。
2 · 端点与拐角：linecap / linejoin
粗描边时，线的两端怎么收口 (stroke-linecap)、拐角怎么转 (stroke-linejoin)，差别很明显。白色细线是路径的真实几何（中线）：
butt 在端点处齐根切断；round / square 都会让线多伸出半个 stroke-width——看白色中线两端露在外面的那截就懂了。拐角同理：miter 尖角（太尖时受
stroke-miterlimit 削成 bevel）、round 圆角、bevel 切平角。
3 · paint-order：先描边还是先填充？
默认 先填充、后描边，所以粗描边会吃掉一半填充（盖在字形上）。paint-order: stroke 反过来，描边垫底、填充压在上面，字形完整——给文字加描边边框时必备：
4 · fill-rule：自交图形哪里算「里面」？
一笔画的五角星，五条边在中心自交。fill-rule 决定中间那个五边形算不算被填充：nonzero（默认）看缠绕数，中心算「里」→ 填实；evenodd 数穿越次数，中心穿 2 次为偶 →「外」→ 留洞。
同一个 nonzero / evenodd 也出现在 clip-path 中——那里用它界定裁剪区，这里用它界定填充区。同一条规则、两处应用，正是「形状值与属性解耦」这条主线的体现。