Html SVG矩形继承父对象的宽度和高度

简而言之，我有这样一个SVG标记

<svg width="700" height="700">
    <g width="700" height="700">
        <g width="66" height="140" class="bar"></g>
        <g width="132" height="140" class="bar"></g>
        <g width="99" height="140" class="bar"></g>
    </g>
</svg>

现在我想在每个条中放置SVG矩形。这些矩形应该填充相应的条形图。我检查了矩形的规格，发现当我们使用宽度作为属性时，百分比单位是允许的，但它们可能有两种含义：
1.视区百分比
2.边界框的百分比。
只要我有宽度和高度的酒吧组设置，它应该为我工作。但是它没有-当我将rect元素的宽度设置为100%时，它会占据整个SVG框。

元素没有

宽度和
高度属性。组只封装元素，不控制其位置或大小。但是，您可以使用内部
元素（见下文）

此外，还必须设置SVG元素的位置。SVG没有HTML那样的自动布局

<svg width="700" height="700">
    <g>
        <svg x="0"   width="66" height="140" class="bar"></svg>
        <svg x="100" width="132" height="140" class="bar"></svg>
        <svg x="200" width="99" height="140" class="bar"></svg>
    </g>
</svg>


好的，明白了。关于位置控制，它可以通过组的transform属性来完成（看起来这个属性可以被继承）。是的，没错。如果设置组的
transform
属性，则实际上并不是设置组的位置，而是设置组的所有后代继承的变换。