Question

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

我有简单的css：

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

如何设置svg高度等于4个高度？

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

Answer 1

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

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

1 个答案: