HTML5中SVG线性渐变LinearGradient的矢量实现

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时），但有边界条件： WisPaper 复旦大学研发的AI学术搜索工具，5分钟内筛选1000篇论文