渐变与图案：画笔工厂
渐变和图案不是颜色，而是 paint server：定义在 <defs> 里（不直接渲染），被 fill="url(#id)" 或 stroke="url(#id)" 引用。它们带一套自己的坐标系开关 (gradientUnits /
patternUnits)——理解了它，就理解了 SVG 里所有 *Units 的行为。
1 · 调一支渐变笔
拖 <stop> 的色与位置、切 linear / radial、调渐变跨度看 spreadMethod 怎么填两侧空白：
把渐变跨度拖到 100% 以下，渐变向量就短于形状，两侧露出空白——这时 spreadMethod 接管：pad（默认）用首尾色延展填满、reflect 镜像往返、repeat 直接重复。
2 · ★ gradientUnits：同一支笔，两种坐标系
这是 SVG 单位系统中最易混淆的一点。下面大小两个矩形共用同一个渐变，只切换 gradientUnits:
objectBoundingBox（默认）：坐标是 0~1 的相对比例，贴着每个形状自己的包围盒算——所以两个矩形各自显示一段完整的蓝→紫→橙，大小不同但「看起来一样」。
userSpaceOnUse：坐标是绝对用户坐标（这里 x2=300 横跨整块画布）——渐变像一张铺在背景上的大布，每个形状只是开了一扇窗露出自己那一段，于是渐变跨形状连续。filter / mask / pattern 的 *Units 全是这套逻辑。
3 · pattern：把一小块图案平铺
<pattern> 也是 paint server——定义一个 tile，被 fill="url(#pat)" 平铺铺满。拖 tile 尺寸：
本系列已落地机制的小结：SVG 的图形是真实 DOM，它的上色 / 描边 / 几何属性几乎都同时是 XML 属性和 CSS 属性，连渐变图案都是可被 url() 引用的第一类对象——所以 CSS
才能从外部、逐层地驱动它。这套模型解释得了的到此为止；它解释不了的部分（文本排版、stroke 对齐、性能……），见 SVG 还缺什么。