Question

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

我在div的左上角有一个SVG图像作为css背景。 SVG图形应该在div背景上无缝合并，而是在渲染图形周围生成细边框。它在桌面浏览器上运行良好（在Chrome，Firefox和Opera上测试），但它在Android股票浏览器，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渲染引擎上的一个错误......我不知道。

在华硕Transformer和HTC One上测试过。

有任何建议吗？

谢谢！

Answer 1

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

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

您可以使用跟踪所需形状的单个背景svg图像，就像使用带背景图像的较大div一样。

Android浏览器上的SVG渲染

1 个答案: