paint server · 渐变/units

渐变与图案：画笔工厂

渐变和图案不是颜色，而是 paint server：定义在 <defs> 里（不直接渲染），被 fill="url(#id)" 或 stroke="url(#id)" 引用。它们带一套自己的坐标系开关（gradientUnits 与 patternUnits），理解了它，就理解了 SVG 里所有 *Units 的行为。

1 · 一支渐变笔

图 1-1 · 可拖 stop 的色与位置、切 linear 与 radial、调渐变跨度，看 spreadMethod 怎么填两侧空白。

注 · 把渐变跨度拖到 100% 以下，渐变向量就短于形状，两侧露出空白，这时 spreadMethod 接管：pad（默认）用首尾色延展填满，reflect 镜像往返，repeat 直接重复。

2 · gradientUnits 的两种坐标系

这是 SVG 单位系统中最易混淆的一点。

图 2-1 · 大小两个矩形共用同一个渐变，只切换 gradientUnits，看渐变是各自完整一段还是跨形状连续。

建议 · 两种取值的差别值得一次记牢。objectBoundingBox（默认）的坐标是 0 到 1 的相对比例，贴着每个形状自己的包围盒算——所以两个矩形各自显示一段完整的蓝到紫到橙，大小不同但看起来一样。userSpaceOnUse 的坐标是绝对用户坐标（图中 x2=300 横跨整块画布），渐变像一张铺在背景上的大布，每个形状只是开了一扇窗露出自己那一段，于是渐变跨形状连续。filter、mask、pattern 的 *Units 全是这套逻辑。

3 · pattern 的平铺

<pattern> 也是 paint server——定义一个 tile，被 fill="url(#pat)" 平铺铺满。

图 3-1 · 可拖 tile 尺寸，看图案的平铺密度如何变化。

本系列对现有机制的拆解到此为止，可以收束成一句：SVG 的图形是真实 DOM，它的上色、描边、几何属性几乎都同时是 XML 属性和 CSS 属性，连渐变图案都是可被 url() 引用的第一类对象——所以 CSS 才能从外部、逐层地驱动它。这套模型解释不了的部分（文本排版、stroke 对齐、性能等），见 SVG 还缺什么。