如何为SVG整个g组应用统一水平线性渐变而非单个子元素

默认SVG线性渐变的gradientUnits属性值为objectBoundingBox，该模式下渐变会以每个引用渐变的独立元素的自身边界盒作为0%-100%的渐变坐标参考范围。你给<g>组设置填充渐变时，组本身没有独立的填充边界，渐变会下发到每个子矩形上单独计算，因此每个矩形都会独立渲染从绿到黑的渐变，无法实现跨所有矩形的统一渐变效果。
另外你提供的示例代码里渐变属性x2="100sv%"存在拼写错误，就算修正为x2="100%"，也无法解决上述默认参考系导致的逐元素渲染问题。

不需要给每个矩形单独编写渐变适配逻辑，有两种低维护成本的实现方式：

方案1：修改渐变坐标参考系 #

将渐变的gradientUnits属性设置为userSpaceOnUse，此时渐变坐标会相对于SVG用户坐标系（或最近的带transform的祖先元素坐标系）计算，不再绑定单个子元素的边界。你只需要将渐变的起止坐标对齐整个分段进度条的总范围即可。
核心实现代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20" width="100%" height="100%">
  <defs>
    <linearGradient 
      id="groupGrad" 
      x1="10" y1="0" 
      x2="56" y2="0" 
      gradientUnits="userSpaceOnUse"
    >
      <stop offset="50%" stop-color="green" />
      <stop offset="50%" stop-color="black" />
    </linearGradient>
  </defs>
  <!-- 组直接填充渐变即可，子元素无需单独配置 -->
  <g fill="url(#groupGrad)">
    <rect x="10" y="1" width="6" height="15" />
    <rect x="20" y="1" width="6" height="15" />
    <rect x="30" y="1" width="6" height="15" />
    <rect x="40" y="1" width="6" height="15" />
    <rect x="50" y="1" width="6" height="15" />
  </g>
</svg>

• 注意事项：如果进度条组存在transform位移/缩放，要么同步调整渐变坐标，要么将渐变定义在组内部，同时给组设置非none的transform值，让渐变参考系对齐组的本地坐标。

方案2：蒙版裁剪（适配动态布局） #

如果你的分段矩形位置、宽度、间隙后续会动态调整，蒙版方案维护成本更低：先绘制一个覆盖整个进度条总范围的大矩形填充统一渐变，再用原有的分段矩形组作为蒙版，仅保留矩形位置的渐变内容，间隙区域自然透明。
核心实现代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20" width="100%" height="100%">
  <defs>
    <linearGradient id="fullGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="50%" stop-color="green" />
      <stop offset="50%" stop-color="black" />
    </linearGradient>
    <mask id="segMask">
      <!-- 蒙版中白色区域为最终显示的内容 -->
      <g fill="white">
        <rect x="10" y="1" width="6" height="15" />
        <rect x="20" y="1" width="6" height="15" />
        <rect x="30" y="1" width="6" height="15" />
        <rect x="40" y="1" width="6" height="15" />
        <rect x="50" y="1" width="6" height="15" />
      </g>
    </mask>
  </defs>
  <!-- 单块渐变矩形套蒙版，自动实现分段效果 -->
  <rect x="10" y="1" width="46" height="15" fill="url(#fullGrad)" mask="url(#segMask)"/>
</svg>

• 优势：渐变无需手动计算坐标，后续调整内部矩形的位置、尺寸、间隙时，不需要修改渐变配置，渐变会自动适配整个进度条的总宽度。

两种方案最终渲染效果都和你给出的HTML预期效果完全一致：前3段为绿色，后2段为黑色，中间间隙透明。

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