Firefox，糟糕的svg图像渲染

Question

我在Ubuntu上使用Firefox时遇到SVG图像渲染效果不佳。你可以在附图上看到字母J下方有一条黑线。此工件仅在某些缩放级别发生。该图片随<img>标记一起添加，因此它不是背景。使用Inkscape创建图像。它在Chrome上正常呈现，我没有尝试其他操作系统。

有没有办法解决这个问题，保留SVG？

编辑：因为这只影响边框上的图像，我找到了一种解决方法，在文本编辑器中打开SVG并增加几个像素的高度和宽度，这意味着在文本周围留下一些透明填充。

如果这是一个firefox错误，我仍然很好奇

Answer 1

原则上，Firefox中的SVG渲染并不比任何其他浏览器差。但是每个浏览器都有自己的渲染缺点，特别是当形状彼此接近并且缩放发挥作用时。

所以我可能会建议您检查一下你的图形，并在字母周围留一个小空间，这样就没有形状»直接将字母贴在字母的轮廓上。不幸的是我无法看到你的图形的代码，但我很确定这个问题是由彼此非常接近的形状引起的（按照“捕捉”排列）并且没有“保存重叠”。

对于字体有Hinting，是什么优化了渲染，特别是对于小尺寸，但对于SVG没有这样的东西，因为你不能确定每个浏览器将如何处理这些»边缘情况«它取决于你准备图形，以便不会出现这些故障。