css - SVG 宽度未按页面比例填充

Question

我在使用全宽 SVG(页面宽度)时遇到问题。当缩放我的窗口时，它会产生一个间隙，当进一步缩放时，SVG 会再次填充全宽。屏幕是浏览器窗口左端的图像。

SVG:

<svg class="line line-top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1280 50">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>

你可以在这个fiddle中看到它尝试更改视框高度，问题差距开始变小。

有什么想法吗？

Answer 1

您需要使 svg 显式填充页面即

body {
    background:red;
    margin:0;
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}

<svg fill="black" viewBox="0 0 1280 50" preserveAspectRatio="xMidYMin" width="100%" height="100%">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>