SVG线性渐变objectBoundingBox与userSpaceOnUse效果不一致问题咨询

嘿，这个问题的核心是你搞混了SVG线性渐变两种单位的坐标参考逻辑，我给你拆解清楚：

先明确两个渐变的本质区别 #

• userSpaceOnUse（用户空间）：渐变的起点、终点坐标是绑定在整个SVG的全局坐标系上的（就是你设置的viewBox="0 0 500 500"这个大画布）。不管你把这个渐变填充到哪个元素上，渐变的位置和方向都是固定不变的。
• 默认的objectBoundingBox（元素边界框）：渐变的坐标是绑定在被填充元素自己的边界框上的——它会把元素的宽高映射成一个0~1的单位正方形，元素的左上角对应(0,0)，右下角对应(1,1)，渐变会跟着元素的位置、大小自动适配。

看你的代码具体情况 #

• 左边的矩形用user-grad：这个渐变的起点是SVG画布的(0,0)，终点是(200,100)，而左边的矩形刚好从(0,0)延伸到(200,100)，完美覆盖了整个渐变区域，所以显示的是完整的橙→蓝过渡，过渡方向是从矩形的左上角到右下角。
• 右边的矩形用box-grad：这个渐变是基于它自己的边界框来计算的——它的左上角(250,0)对应渐变的(0,0)，右下角(450,100)对应渐变的(1,1)，所以右边的矩形内部也会显示一个从自己左上角到右下角的橙→蓝过渡，过渡的斜率和左边完全一致。

为什么你觉得效果不一致？ #

大概率是你误解了objectBoundingBox的作用：你可能期望右边的矩形也显示全局坐标系里(0,0)到(200,100)的渐变（那右边的矩形会全是蓝色，因为它的位置已经超出了这个渐变的范围），但实际上box-grad是给每个元素生成专属的渐变，所以右边的矩形里是完整的橙蓝过渡，和左边矩形的内部视觉效果其实是一致的——只是渐变的整体位置在画布上不同而已。

如果想让右边的矩形和左边显示完全一样的渐变（也就是都用全局坐标系的渐变），只需要把box-grad的gradientUnits改成userSpaceOnUse，并且保持x1="0" y1="0" x2="200" y2="100"，但这样右边的矩形就会显示渐变的蓝色区域了。

内容的提问来源于stack exchange，提问作者f3dm76