SVG 在 Firefox 中的渲染很糟糕答案

【问题标题】：SVG rendering badly in FirefoxSVG 在 Firefox 中的渲染很糟糕
【发布时间】：2023-03-25 04:32:02
【问题描述】：

我正在制作带有滑动轮播<li>s 的信息图，但我认为，尽管 FF 中的 SVG 错误已得到解决，但 SVG 在 Firefox 中显示为像素化。任何人都可以看到解决此问题的方法吗？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

我喜欢这个答案。我希望 OP 记得回来告诉我们是否是解决方案。
我对裁剪 SVG 犹豫不决，因为它需要很长时间才能确定背景位置/缩放的坐标。另外，我对这个 SVG 的东西有点不知所措。只是为了澄清一下，您是否建议将 SVG 切成更小的块并以某种方式将它们拼凑在一起？
@Dalogi 据我所知，您似乎只使用了 SVG 的一小部分作为画布的背景图像。也许如果你退后一步，解释一下你想要实现的视觉效果，以及你需要支持的浏览器，我的建议可能会改变。
@Phrogz 感谢您的帮助。对此，我真的非常感激。我在这张图上遇到了很多麻烦。信息图的概念是，在整个旋转木马幻灯片系列中，橙色球代表针对该人的缩放剪影 (SVG) 图像的辐射量。随着每一次滑动，剪影的大小都会减小，从而可以看到辐射球的增长，直到最后一次滑动时，球比人大得多。两个图形的大小都符合正确的比例，并且位置是这样，到最后，人与球处于同一水平线上。
@Dalogi 我明白了！那么为什么要使用 SVG 作为 HTML5 Canvas 的背景图像，而不是直接嵌入 SVG？