我有一个问题很久了，我找不到解决方案。
我在 div 的左上角有一个 SVG 图像作为 css 背景。 SVG 图形应该在 div 背景上无缝合并，而不是在呈现的图形周围产生细边框。它在桌面浏览器上运行良好(在 Chrome、Firefox 和 Opera 上测试过)，但在 android stock 浏览器、chrome for android 和 firefox for android 上失败。
这是一个小测试用例: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 渲染引擎上的一个错误...我不知道。
在 Asus Transformer 和 HTC One 上测试。
有什么建议吗？
谢谢!
最佳答案
我猜测线条是由于将两部分合成到页面上而出现的。 Angular 是不透明的并试图覆盖较大的 div，并且您会得到一些边缘抗锯齿效果。
我认为如果 svg 是相同大小的 png，假设以相同的方式应用它，您可能会得到相同的效果。
您可能会使用单个背景 svg 图像来描绘您想要的形状，就像使用带有背景图像的较大 div 一样。
关于android - Android 浏览器上的 SVG 渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18409061/