SVG中的linearGradient是原生矢量实现通过数学坐标和线性插值定义颜色过渡具备无限缩放不失真、分辨率无关、实时渲染、几何变换同步等矢量特性。SVG中的linearGradient本身就是矢量实现它不依赖像素而是通过数学定义的坐标系统和插值规则来描述颜色过渡天然具备无限缩放不失真、与分辨率无关的矢量特性。线性渐变的本质是矢量插值LinearGradient 并非生成位图而是在渲染时实时计算对图形上每个点根据其在渐变坐标系中的相对位置归一化到 [0,1] 区间按指定色标stop做线性插值。这个过程完全基于向量运算和比例关系与设备像素无关。起点x1,y1和终点x2,y2是用户坐标系中的绝对或相对坐标可为百分比属于几何定义 所有stop的offset是无单位的比例值如0、0.5、1不绑定任何物理尺寸 渐变方向、长度、分布完全由坐标和比例决定缩放容器时渐变自动重映射无采样失真关键属性决定矢量行为以下属性共同保障其矢量性gradientUnitsuserSpaceOnUse坐标以当前用户坐标系为基准默认直接对应 SVG 几何变换缩放/旋转图形时渐变同步变化 gradientUnitsobjectBoundingBox坐标以引用图形的包围盒为单位0–1 归一化更常用即使图形被非均匀缩放渐变仍平滑填充整个区域 spreadMethodpad/reflect/repeat扩展逻辑也是基于向量区间延拓非像素复制与CSS渐变的本质区别CSS中的linear-gradient()在多数场景下也属矢量尤其用于background时但有边界条件 WisPaper 复旦大学研发的AI学术搜索工具5分钟内筛选1000篇论文