在Firefox中嚴重的SVG渲染

我正在使用滑動輪播<li> s的信息圖，但SVG在Firefox中顯示爲像素化，即使FF中的SVG錯誤已解決，我想。任何人都可以看到這個修復？在Firefox中嚴重的SVG渲染

Just fyi - 如果你的意思是在左側的別名...同樣的事情發生在Chrome中，所以它不能成爲一個Firefox特定的錯誤。你用什麼產生了SVG？ – tamarintech 2011-04-11 15:17:15

也爲Safari進行了確認。 – Blender 2011-04-11 15:18:56

@esnyder Adobe Illustrator。有沒有更好的工具可以用來生成SVG？ – SixtySticks 2011-04-11 15:24:20

您放大您的SVG文件非常大的尺寸：

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

大多數瀏覽器不會抗鋸齒非常大的SVG圖形，因爲它需要太多的顯存。（這是我們在Safari和Chrome中看到的。）看起來Firefox實際上是將SVG渲染到畫布的大小，然後通過圖像插值將它吹到裁剪區域。

兩者的修復方法都是相同的：
先裁剪SVG，然後僅使用裁剪部分作爲背景。

2011-04-11 16:56:47 Phrogz

我喜歡這個答案。我希望OP記得回來，讓我們知道這是否是解決方案。 – tamarintech 2011-04-11 19:01:55

我對裁剪SVG猶豫不決，因爲花費了相當長的一段時間來計算背景位置/縮放的座標。另外，我對這個SVG的東西有點深刻。爲了澄清，你是否建議將SVG分成更小的塊並將它們拼湊在一起？ – SixtySticks 2011-04-11 20:07:49

@Dalogi據我所知，你似乎只是將SVG的一小部分用作畫布的背景圖像。也許如果你退後一步，解釋你試圖完成的視覺效果，以及你需要支持的瀏覽器，我的建議可能會改變。 – Phrogz 2011-04-11 20:26:30

使用viewbox平移/ zoooming時元素的屬性。它性能更高，使用更簡單。

2012-01-19 03:46:31

回答