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

How I can set auto height to svg element?

本文关键字：设置 svg 元素 高度      更新时间：2023-09-26

我有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个矩形的高度？

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

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

相关文章：