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>

Answer 2

错误没有修复或找到，但是我创建了一个简单的CSS解决方案，将它拉出浏览器，并且溢出它。我知道这不是解决方案，但至少客户没​​有注意到：）

类似的东西：

svg{
   fill: currentcolor;
   left: -7px;
   position: absolute;
   width: 103%;
}

.container{
   overflow:hidden;
}