Question

我目前在绑定DIV中正确对齐内联SVG时遇到问题，如本示例所示。

<!DOCTYPE html>
<html>
<body>
    <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"">
            <rect x="0" y="0" width="100" height="100" style="fill: red;" />
        </svg>
    </div>
</body>
</html>

SVG调整大小以匹配div的尺寸，但我无法为SVG设置任何对齐。 text-align和vertical-align似乎都不适用于Firefox 9，Chrome 18，IE 9或Opera 11.61。我只想将内联SVG放在DIV的左上角。

请注意，在我的情况下，周围的DIV具有动态dimmension（％-values），因此使用绝对定位不起作用。

在这种情况下，有人知道如何对齐SVG吗？

Answer 1

将preserveAspectRatio="xMidYMid meet"属性添加到<svg>元素根据{{3}}。

HTML中的内联SVG对齐方式

1 个答案: