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并仅使用裁剪部分作为背景.