在Win 10 Chrome上显示错误的svg background-size(以像素为单位)

时间:2017-07-07 11:09:00

标签: html css google-chrome svg

我创建了一个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上的Google Chrome):

MacOS screenshot

但是,在Windows 10上的Google Chrome上执行此操作(请注意对角线扫描线):

enter image description here

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

1 个答案:

答案 0 :(得分:0)

打开.svg文件,在开头找到标记,并在其中添加以下属性:

preserveAspectRatio="none"

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