0

我有一个问题很长时间了，我找不到解决方案。

我在 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 上测试。

有什么建议吗？

谢谢 ！

4

1 回答 1

0

我猜这些线条是由于将这两个部分合成到页面上而出现的。角落是不透明的，并试图覆盖较大的 div，并且您会获得一些边缘抗锯齿效果。

我认为如果 svg 是相同大小的 png，假设它以相同的方式应用，你可能会得到相同的效果。

您可能可以使用单个背景 svg 图像来跟踪您想要的形状，就像使用带有背景图像的较大 div 一样。

于 2013-08-26T09:19:17.993 回答