Html Firefox中的SVG渲染不好

我正在制作一个带有滑动旋转木马的信息图，但是SVG在Firefox中显示为像素化，尽管FF中SVG的错误已经解决，我想。有人能找到解决办法吗

---

URL:

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

背景尺寸：9730px 30000px；
背景位置：-7310px-29250px；

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

两者的修复方法相同：

---

首先裁剪SVG，仅使用裁剪部分作为背景。

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

仅供参考-如果您指的是左侧的别名。。。同样的事情也发生在Chrome上，所以它不可能是Firefox特有的bug。您使用什么生成SVG？@esnyder Adobe Illustrator。有没有更好的工具可以用来生成SVG？我在该页面上没有看到任何SVG。我只看到

canvas

@Jim Blackler它在CSS中作为画布的背景图像，我只看到灰色部分和白色部分的锯齿。白底黑，黑底灰对我来说很正常。你有透明度设置吗？我喜欢这个答案。我希望OP记得回来告诉我们这是否是解决方案。我对裁剪SVG犹豫不决，因为它花了相当长的时间来计算背景位置/缩放的坐标。另外，我对SVG有点不了解。只是想澄清一下，您是否建议将SVG切成小块，然后以某种方式将它们拼接在一起？@Dalogi就我所知，您似乎只使用SVG的一小部分作为画布的背景图像。也许如果你退一步，解释一下你想要达到的视觉效果，以及你需要支持的浏览器，我的建议可能会改变。@Phrogz谢谢你的帮助。我真的很感激。我在这张图上遇到了不少麻烦。信息图的概念是，在一系列旋转木马幻灯片中，橙色的球代表了人体比例轮廓（SVG）图像的辐射量。每一张幻灯片的轮廓都会变小，可以看到辐射球的生长，直到最后一张幻灯片时，辐射球比人大得多。这两种图形的大小都是正确的比例，而且位置都是这样的：到最后，这个人和球在同一条水平线上。@Dalogi，我明白了！那么，为什么要将SVG用作HTML5画布的背景图像，而不是直接嵌入SVG呢？