Firefox中模糊的SVG

我的SVG图形在Firefox中呈现不清晰。例如，以下应产生一个14px x 14px的正方形，其笔划宽度为2px：

<svg width='14' height='14'><rect x='1' y='1' width='12' height='12' stroke='black' stroke-width='2' fill='transparent'/></svg>

Firefox通常生成具有抗锯齿边的正方形。这可以在下面的JSFIDLE中看到。事实上，当我调整浏览器窗口的大小时，模糊性会发生变化：有时看起来清晰，有时变得模糊

---

Chrome和Safari可以很好地绘制SVG。我只在Firefox中见过这种情况。任何帮助都将不胜感激。

我不知道原因，但我可以为您指出一个解决方案，通过使定义矩形的所有点具有.5值x和y来强制消除锯齿，只需将原点设置为1.5而不是1（0.5不起作用，因为笔划宽度为2）您可以尝试css形状渲染：查看它是否有任何区别。我无法在Firefox 26.0中重现这个问题