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矩形。这些矩形应填充其相应的父母条。我检查了矩形的规格，发现当我们使用宽度为attr时允许的百分比单位，但它们可能有两种可能的含义：
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矩形继承父级的宽度和高度

1 个答案: