SVG 矩形继承父级的宽度和高度

Question

简而言之，我拥有的是这样的 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 框。

Answer 1

<g> 元素没有 width 和 height 属性。组只是封装元素，它们不控制元素的位置或大小。但是，您可以使用内部 <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>

SVG 矩形继承父级的宽度和高度

SVG Rectangle inheriting width and height of parent

html

svg