首页 文章

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

提问于
浏览 次
1

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

html svg

1 回答

  • 2

    <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>
    回复于

相关问题