如何設置svg元素的自動高度？

Question

我有svg元素和4 rect。

<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>

我有簡單的CSS：

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

如何將svg高度設置為等於4 rects的高度？

jsfiddle示例： http ： //jsfiddle.net/CpZQY/

Answer 1

AFAIK，您不能使用純CSS做到這一點。 SVG並未指定所有必需的屬性，因此將使用默認大小。 您將必須在SVG元素上指定視口/大小。 這應該沒問題，因為在rect也有硬編碼的值。 如果您在svg元素中添加width="105px" ，則不再需要CSS height指令。