html - svg 背景大小(以像素为单位)在 Windows 10 Chrome 上显示错误

标签 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 上会这样做(注意对 Angular 线扫描线):

enter image description here

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

最佳答案

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

preserveAspectRatio="none"

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

关于html - svg 背景大小(以像素为单位)在 Windows 10 Chrome 上显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44969293/

相关文章:

javascript - 代码在 Firefox 中不起作用,而在 chrome 中运行良好

javascript - 不能居中div

php - 文件输入问题 - 限制所选文件的数量

html - 如何让这个 div 覆盖 flash 控件(jw 播放器)?

html - 浏览器之间的地理定位精度差异

javascript - 不要在 chrome 扩展中重新加载弹出窗口

python - selenium python 向下翻页 - 未知错误:net::ERR_NAME_NOT_RESOLVED

css - IE7兼容的CSS框架

javascript - advancedSlider 图像 slider 插件集成问题与缩略图。

javascript - GIF Spinner 左对齐,如何通过 Javascript 使其居中对齐