Мое SVG-изображение идеально в пикселях, и все браузеры отображают его нормально, кроме FireFox.
Пример 1 (разметка начальной загрузки):
https://codepen.io/anon/pen/gdVxJo
В столбцах Bootstrap всего два прямоугольника.У всех прямоугольников есть границы с выравниванием по пикселям и ширина границы = 2 пикселя, но FireFox добавляет сглаживание.
Я думаю, это зависит от высоты области, но не знаю, почему.Есть пример с одним прямоугольником без CSS.
Пример 2 (чистый HTML):
https://codepen.io/anon/pen/OoKxEd
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="396" height="100">
<rect x="0" y="0" width="396" height="100" fill="none" stroke="#000" stroke-width="2"></rect>
</svg>
</body>
Возможно, вам понадобитсяизменить высоту области рендеринга на CodePen для воспроизведения ошибки.
Кто-нибудь знает, можно ли заставить FireFox правильно рисовать линии?