SVG宽度未填充页面比例答案

【问题标题】：SVG width not filling on page scaleSVG宽度未填充页面比例
【发布时间】：2015-02-08 08:05:43
【问题描述】：

我在使用全宽 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 中看到它尝试更改视图框高度，问题差距开始变小。

有什么想法吗？

【问题讨论】：

在 Chrome 中看起来不错
@Ian 尝试缩放您的浏览器并观察左边的黑色。

标签： css html svg responsive-design

【解决方案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>

【讨论】：

谢谢！我试过了，但 SVG 不能是一个完整的页面高度项目。 jsfiddle.net/zujjof9q，看看内容去哪了。
你需要把它做成 CSS 背景图片。
是的，但是关于使用这个 SVG 的想法是使用填充。所以我只需要包含一次 svg。

【解决方案2】：

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

类似：

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

.container{
   overflow:hidden;
}

【讨论】：