fill & stroke · 画笔

fill & stroke：描边与自绘

每个图形有两支笔：fill（填充）和 stroke（描边）。描边参数中最具代表性的是 stroke-dasharray 配 stroke-dashoffset——把虚线的实线段设成整条路径那么长，再把 dashoffset 从全长滑到 0，路径就像被一支笔逐段画出。签名、地图路线、loading 圈用的是同一原理。

1 · 路径自绘

图 1-1 · 这条曲线的 stroke-dasharray 等于它的 getTotalLength()。拖滑块就是拖 dashoffset。

注 · 一条 dasharray: L 的虚线只有「L 长的实线加 L 长的空隙」，刚好一段实线铺满全程。dashoffset 把这段实线沿路径推走：推 L 个单位时实线完全移出视野（路径隐形），推 0 时铺满（完整显示），中间值就是画了一半。不知道真实长度也行——给 <path pathLength="100"> 把路径长归一化成 100，直接按百分比算。

2 · 端点与拐角

粗描边时，线的两端怎么收口 (stroke-linecap)、拐角怎么转 (stroke-linejoin)，差别很明显。

图 2-1 · 白色细线是路径的真实几何（中线）。可切换取值，看端点与拐角相对中线的位置。

注 · butt 在端点处齐根切断，round 与 square 都会让线多伸出半个 stroke-width——看白色中线两端露在外面的那截就懂了。拐角同理：miter 是尖角，太尖时受 stroke-miterlimit 削成 bevel；round 是圆角；bevel 是切平角。

3 · paint-order 的先后

默认先填充、后描边，所以粗描边会吃掉一半填充、盖在字形上。paint-order: stroke 反过来，描边垫底、填充压在上面，字形保持完整——给文字加描边边框时必备。

图 3-1 · 同一段带粗描边的文字，切换 paint-order 看字形被吃掉与保持完整的差别。

4 · fill-rule 的内外判定

一笔画的五角星，五条边在中心自交。fill-rule 决定中间那个五边形算不算被填充：nonzero（默认）看缠绕数，中心算「里」，填实；evenodd 数穿越次数，中心穿 2 次为偶数，算「外」，留洞。

图 4-1 · 切换 nonzero 与 evenodd，看五角星中心的五边形填实还是留洞。

注 · 同一个 nonzero 与 evenodd 也出现在 clip-path 中——那里用它界定裁剪区，本页用它界定填充区。同一条规则、两处应用，正是「形状值与属性解耦」这条主线的体现。