我有一个问题很长时间了,我找不到解决方案。
我在 div 的左上角有一个 SVG 图像作为 css 背景。SVG 图形应该在 div 背景上无缝合并,而不是在渲染图形周围产生细边框。它在桌面浏览器上运行良好(在 Chrome、Firefox 和 Opera 上测试)但在 android 股票浏览器、android 版 chrome 和 android 版 firefox 上失败。
这是一个小测试用例: http: //jsfiddle.net/SDJHA/1/ (SVG代码在Javascript框架上作为注释)
CSS代码是:
.cont{ background-color : #7AC943; width : 300px; height : 300px; }
.elementOne{
background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%237AC943%22%20points%3D%22100%2C100%20100%2C0%200%2C100%20%22%2F%3E%3C%2Fsvg%3E");
width : 100px; height: 100px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-color : white;
}
的HTML:
<div class="cont"><div class="elementOne"></div></div>
计算子像素时,这可能是 android svg 渲染引擎上的错误......我不知道。
在华硕变压器和 HTC One 上测试。
有什么建议吗?
谢谢 !