Android 浏览器上的 SVG 渲染答案

【问题标题】：SVG rendering on android browsersAndroid 浏览器上的 SVG 渲染
【发布时间】：2013-08-26 20:56:59
【问题描述】：

我有一个问题很久了，我找不到解决办法。

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

在华硕变压器和 HTC One 上测试。

有什么建议吗？

谢谢！

【问题讨论】：

标签： android html css svg

【解决方案1】：

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

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

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

【讨论】：

谢谢埃里克。是的，它接缝不仅仅是一个 SVG 问题。发布后我尝试了一个 gif 并得到了类似的结果。尽管如此，使用 SVG 的结果更令人讨厌，因为它会在背景的四个侧面创建这些边缘。使用 gif 时，透明部分在背景上按应有的方式合并，抗锯齿效果仅出现在归档部分上。
我决定使用 :before 伪类 absolute 位于 top:-1px 和 left:-1px ，因此空白边缘保持在我布局的白色部分的顶部。在标记此帖子已回答之前，我将等待看看是否出现另一个答案。我认为这是一个错误，但我不知道应该在哪里提交（chrome、firefox 或 android 开发者论坛？）。