跨 SVG 组而不是组的各个部分创建水平线性渐变

Question

是否可以创建适用于整个组而不是每个单独部分的水平渐变？我正在尝试构建一个由多个矩形组成的进度条，中间有 space（请参阅代码段），但这似乎不可能，除非我为每个不理想的个体创建逻辑

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100sv%" y2="0%">
      <stop offset="50%" stop-color="green" />
      <stop offset="50%" stop-color="black" />
    </linearGradient>
  </defs>

  <defs>
    <linearGradient id="grad2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="50%" stop-color="green"/>
      <stop offset="50%" stop-color="black" />
    </linearGradient>
  </defs>

  <g fill="url(#grad1)">
    <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>

<p>desired look</p>

<div style="display: flex; flex-direction: row"> 
  <div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
  <div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
  <div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
  <div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
    <div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
</div>

Answer 1

设置属性 gradientUnits="userSpaceOnUse" 并将图形最左侧的坐标分别用于 x1 (x1="10")。最右边的 x2 (x2="56").

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
  <defs>
    <linearGradient gradientUnits="userSpaceOnUse" id="grad1"
                    x1="10" y1="0" x2="56" y2="0">
      <stop offset="50%" stop-color="green" />
      <stop offset="50%" stop-color="black" />
    </linearGradient>
  </defs>

  <g fill="url(#grad1)">
    <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>

跨 SVG 组而不是组的各个部分创建水平线性渐变

Create a horizontal linear gradient across an SVG group and not on the individual parts of the group

svg