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 回答