SVG中的<linearGradient>是原生矢量实现，通过数学坐标和线性插值定义颜色过渡，具备无限缩放不失真、分辨率无关、实时渲染、几何变换同步等矢量特性。
SVG中的<linearGradient>本身就是矢量实现，它不依赖像素，而是通过数学定义的坐标系统和插值规则来描述颜色过渡，天然具备无限缩放不失真、与分辨率无关的矢量特性。
线性渐变的本质是矢量插值
LinearGradient 并非生成位图，而是在渲染时实时计算：对图形上每个点，根据其在渐变坐标系中的相对位置（归一化到 [0,1] 区间），按指定色标（<stop>）做线性插值。这个过程完全基于向量运算和比例关系，与设备像素无关。
- 起点
x1,y1和终点x2,y2是用户坐标系中的绝对或相对坐标（可为百分比），属于几何定义 - 所有
stop的offset是无单位的比例值（如0、0.5、1），不绑定任何物理尺寸 - 渐变方向、长度、分布完全由坐标和比例决定，缩放容器时，渐变自动重映射，无采样失真
关键属性决定矢量行为
以下属性共同保障其矢量性：
-
gradientUnits="userSpaceOnUse"：坐标以当前用户坐标系为基准（默认），直接对应 SVG 几何变换，缩放/旋转图形时渐变同步变化 -
gradientUnits="objectBoundingBox"：坐标以引用图形的包围盒为单位（0–1 归一化），更常用；即使图形被非均匀缩放，渐变仍平滑填充整个区域 -
spreadMethod（pad/reflect/repeat）：扩展逻辑也是基于向量区间延拓，非像素复制
与CSS渐变的本质区别
CSS中的linear-gradient()在多数场景下也属矢量（尤其用于background时），但有边界条件：
立即学习“前端免费学习笔记（深入）”；
- CSS渐变绑定到盒模型，受
background-size、transform等影响，某些旧引擎可能光栅化缓存 - SVG
<linearGradient>是独立的<defs>资源，可被任意数量图形复用，且渲染路径由SVG规范严格定义，保证跨浏览器矢量一致性 - SVG支持
gradientTransform——一个完整的transform矩阵，可对渐变坐标系做仿射变换（如斜切、旋转），进一步体现其几何矢量本质
实际使用建议
要确保真正发挥SVG线性渐变的矢量优势：
- 优先用
objectBoundingBox（尤其填充不规则路径时），避免因坐标单位错配导致缩放异常 - 避免在
<stop>中混用带单位的offset（SVG规范只接受无单位数值或百分比，如50%等价于0.5） - 若需动态控制，用JavaScript修改
setAttribute更新x1/y1等值，而非重绘位图 - 与
<pattern>或滤镜组合时，仍保持矢量链路，整条渲染管线无光栅中间态
SVG线性渐变从定义、计算到合成，全程运行在几何与插值层面，没有位图参与，是Web中典型的原生矢量图形能力。
