同一个 SVG 渐变套到宽版和窄版品牌图形上，为什么颜色对不齐？

默认渐变为什么随对象宽度变化

SVG 的 linearGradient 默认采用 gradientUnits=objectBoundingBox。此时渐变坐标依据引用对象的边界框解释，而不是固定使用整个页面的坐标。

例如两个矩形从相同的横向位置开始，一个宽二百单位，另一个宽八十单位。若渐变从边界框横向起点延伸到终点，两者都会在各自宽度内完成颜色过渡。

因此，距离左边缘相同的采样点，在宽矩形中可能仍接近起始色，在窄矩形中却已接近中间色。颜色不同并不意味着 SVG 文件损坏。

objectBoundingBox 下的百分比位置相对于对象边界解释。决策分支：如果希望每个图形各自完整呈现渐变，默认坐标模式通常符合这种设计意图；如果希望多个图形在共同坐标位置对应颜色，则需检查另一种坐标模式。

userSpaceOnUse 也不是绝对页面坐标

设置 gradientUnits=userSpaceOnUse 后，渐变使用引用发生时的当前用户坐标系，并受到 gradientTransform 的影响。它不是无条件固定到浏览器页面或屏幕的全局坐标。

在这一模式下，百分比坐标与当前 SVG 视口有关，而不是像 objectBoundingBox 那样相对于单个对象边界。

如果宽版和窄版图形处于相同用户坐标系，且引用同一组绝对渐变坐标，那么相同位置可以对应近似相同的颜色。

但若对象分别应用了变换、位于不同坐标环境，或渐变自身存在 gradientTransform，就不能直接假设颜色必然对齐。

决策分支：需要跨对象协调颜色位置时，先核对用户坐标与变换；需要每个对象独立完成渐变时，则评估 objectBoundingBox。

合成浏览器测量揭示的差异

已有自包含 SVG 合成测试使用两个矩形：宽矩形从 x=20 开始，宽度二百，位于 y=10；窄矩形同样从 x=20 开始，宽度八十，位于 y=60。两者高度均为三十，渐变从红色过渡到蓝色。

在 objectBoundingBox 模式下，Canvas 于 (60,25) 采得 RGBA 为 (203,0,52,255)，于 (60,75) 采得 (126,0,129,255)。相同横坐标对应不同颜色。

改用 userSpaceOnUse，并设置渐变横向坐标从 20 到 220 后，两处分别得到 (203,0,52,255) 和 (204,0,52,255)，存在一个通道数值的栅格化差异。

在窄矩形末端 (99,75)，两种模式分别得到 (1,0,253,255) 与 (153,0,101,255)。这些是合成 SVG 的 Canvas 栅格化采样及屏幕观察，不是校准后的品牌色、印刷打样、跨浏览器或 SVG 导入测试。

因此，测量支持坐标机制的差别，却不能保证真实品牌文件在所有软件中完全一致。

虚构练习：独立渐变与统一坐标交接

以下为虚构练习（Illustrative exercise），不是实际商家素材测试。

输入 A 是宽版和窄版品牌装饰条，设计要求每条都从完整红色过渡到完整蓝色。应检查各自对象边界，评估 objectBoundingBox 是否符合独立渐变目标。

输入 B 是同一广告中的两块品牌辅助图形，设计要求它们在相同横坐标呈现一致的颜色阶段。应检查 userSpaceOnUse、引用位置和所有相关变换，而不是只复制渐变名称。

决策分支：A 按对象完整渐变验收；B 按共同坐标的颜色对应关系验收。若图形发生位移、缩放或变换，需重新核对坐标关系。

交接时记录渐变坐标模式、引用对象范围及变换条件。这里处理的是有效 SVG 内部的几何坐标规则，不是设计软件之间的样式导入故障，也不能代替品牌色彩或印刷验收。

核对实际测量数据

这些下载记录来自正文注明的合成检查，不是真实商品、完整发布端或主观质量验收。请保留适用范围。

• synthetic-svg-gradient-samples.csv · SHA256 cfd277dff5ea509e440c54e1c9dbad9c1dda3e84e29e81bd6a5a268d9efdb03b

虚构练习核对表：对象独立渐变与共同用户坐标

以下示例为虚构练习。另存核对表后填写自己的真实观察；不能将示例当作已完成的验收。

下载核对表（CSV）