SVG渲染在Firefox中很糟糕

Question

我正在研究带有滑动轮播<li>的信息图，但SVG在Firefox中显示像素化，即使FF中的SVG错误已经解决，我想。任何人都可以看到修复此问题吗？

网址：http://weaver-wp.weavertest.com/radiation-infographic/

Answer 1

您正在将SVG文件缩放到非常大的尺寸：

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

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

两者的解决方案是相同的：
首先裁剪SVG并仅使用裁剪部分作为背景。

Answer 2

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