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

我有svg元素和4 rect在裏面。如何將自動高度設置爲svg元素？

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

如何設置的4個rects SVG高度相等的高度？

的jsfiddle例如：http://jsfiddle.net/CpZQY/

來源

2013-12-12 D dr

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

來源

2013-12-12 12:50:14 Sebastian

不幸的是，我有很多不同大小的動態生成的rects –

當你動態生成它們時，你可以更新height屬性 - 比如'height = Math.max（height，rect.x + rect.height）' - if使用Javascript的getBBox方法可能會證明形狀更復雜。 – Sebastian

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

回答

相關問題