在SVG组上创建水平线性梯度，而不是在组的各个部分上

Question

是否可以创建一个适用于整个组而不是每个单独块的水平梯度?我试图建立一个进度条组成的多个矩形之间的空间(见片段)，但它似乎不可能，除非我创建逻辑为每个人这是不理想的

<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") resp的图形最左侧的坐标。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>