在Firefox中严重的SVG渲染

问题描述：

我正在使用滑动轮播<li> s的信息图，但SVG在Firefox中显示为像素化，即使FF中的SVG错误已解决，我想。任何人都可以看到这个修复？在Firefox中严重的SVG渲染

Just fyi - 如果你的意思是在左侧的别名...同样的事情发生在Chrome中，所以它不能成为一个Firefox特定的错误。你用什么产生了SVG？ – tamarintech 2011-04-11 15:17:15

也为Safari进行了确认。 – Blender 2011-04-11 15:18:56

@esnyder Adobe Illustrator。有没有更好的工具可以用来生成SVG？ – SixtySticks 2011-04-11 15:24:20

答

您放大您的SVG文件非常大的尺寸：

background-size: 9730px 30000px; 
background-position: -7310px -29250px;

大多数浏览器不会抗锯齿非常大的SVG图形，因为它需要太多的显存。（这是我们在Safari和Chrome中看到的。）看起来Firefox实际上是将SVG渲染到画布的大小，然后通过图像插值将它吹到裁剪区域。

两者的修复方法都是相同的：
先裁剪SVG，然后仅使用裁剪部分作为背景。

我喜欢这个答案。我希望OP记得回来，让我们知道这是否是解决方案。 – tamarintech 2011-04-11 19:01:55

我对裁剪SVG犹豫不决，因为花费了相当长的一段时间来计算背景位置/缩放的坐标。另外，我对这个SVG的东西有点深刻。为了澄清，你是否建议将SVG分成更小的块并将它们拼凑在一起？ – SixtySticks 2011-04-11 20:07:49

@Dalogi据我所知，你似乎只是将SVG的一小部分用作画布的背景图像。也许如果你退后一步，解释你试图完成的视觉效果，以及你需要支持的浏览器，我的建议可能会改变。 – Phrogz 2011-04-11 20:26:30

答

使用viewbox平移/ zoooming时元素的属性。它性能更高，使用更简单。