html - HTML 中的内联 SVG 对齐

我目前在边界 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 具有动态维度(% 值)，因此使用绝对定位不起作用。

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

最佳答案

添加 preserveAspectRatio="xMinYMin" 作为 svg 元素的属性，例如http://jsfiddle.net/longsonr/fLWhu/

关于html - HTML 中的内联 SVG 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9017204/