Javascript 如何将自动高度设置为svg元素？

我有svg元素和4个矩形

<svg class="quarterly-graph">
    <rect y="0" width="100%" height="5" transform="translate(0,0)" style="fill: #ffffff;"></rect>
    <rect y="5" width="100%" height="90" transform="translate(0,0)" style="fill: #e7f0f5;"></rect>
    <rect y="95" width="100%" height="5" transform="translate(0,0)" style="fill: #ffffff;"></rect>
    <rect y="100" width="100%" height="5" transform="translate(0,0)" style="fill: #e7f0f5;"></rect>
</svg>

如何将svg高度设置为等于4个矩形的高度

---

jsidle示例：

AFAIK您不能用纯CSS实现这一点。SVG没有指定所有必需的属性，因此将使用默认大小。您必须在SVG元素处指定视口/大小。这应该没有问题，因为在RECT中也有硬编码的值。如果将width=105px添加到svg元素中，则不再需要CSS height指令。

不幸的是，我有许多不同大小的动态生成的矩形。在动态生成它们时，您可以更新height属性，如height=Math.maxheight，rect.x+rect.height——如果使用Javascript的getBBox方法使形状更复杂，那么它可能会很有用。

.quarterly-graph {
    height : auto;
    border: 1px #000000 solid;
}