svg 背景大小（以像素为单位）在 Win 10 Chrome 上显示错误答案

【问题标题】：svg background-size in pixels displaying wrong on Win 10 Chromesvg 背景大小（以像素为单位）在 Win 10 Chrome 上显示错误
【发布时间】：2017-12-11 15:56:42
【问题描述】：

我已经创建了一个 svg 图片：

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><style>.st0{opacity:.4;fill:#61ffb0;enable-background:new}</style><path class="st0" d="M0 0h1v1H0z"/></svg>

然后我将它用作 div 的背景：

.dotted_bg_dark {
    background-image: url(img/pattern-green.svg);
    background-size: 6px;
}

.darkbg {
    background-color: #212734;
    color: #fff;
}

<div class="darkbg dotted_bg_dark" style="height:500px;">Hello World</div>

这显示正确（MacOS 上的谷歌浏览器）：

但是，在 Windows 10 上的 Google Chrome 上会这样做（注意对角线扫描线）：

为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： html css google-chrome svg

【解决方案1】：

打开您的 .svg 文件，找到开头的标签并在其中添加以下属性：

preserveAspectRatio="none"

[来源][http://www.yootheme.com/support/question/6801?order=modified]

【讨论】：