SVG在Firefox中渲染不良 [英] SVG rendering badly in Firefox

问题描述

我正在使用滑动轮播< li> 工作，但是SVG在Firefox中显示为像素化，即使FF中的SVG的错误已经解决了，我想。任何人都可以看到此问题的修正？

I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?

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

推荐答案

将SVG文件缩放为非常大的尺寸：

You are zooming your SVG file to a very large size:

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

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

Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.

两者的修正是相同的：

首先剪裁你的SVG，只使用裁剪部分作为背景。

The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.

这篇关于SVG在Firefox中渲染不良的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！