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

Question

简而言之，我拥有的是这样的 SVG 标记

\n\n

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

\n\n

现在我想将 SVG 矩形放置在每个条形内。这些矩形应填充其相应的育儿栏。我检查了矩形的规范，发现当我们使用宽度作为属性时允许使用百分比单位，但它们可能有两种可能的含义：
\n1。视口百分比；
\n2. 边界框的百分比。
\n只要我设置了条组的宽度和高度，它应该对我有用。但是当我将 rect 元素的宽度设置为 100% 时，它不会 \xe2\x80\x94 ，它会占据整个 SVG 框。

\n

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>