如何将自动高度设置为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元素？

回答

相关问题