Неточный рендеринг SVG в FireFox
Мое изображение SVG идеально подходит для пикселей, и все браузеры отображают его нормально, кроме FireFox.
Пример 1 (разметка Bootstrap):
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 правильно рисовать линии?
Может просто FireFox правильно рисует линии. Добавьте svg {overflow: visible} и проверьте еще раз.
@RobertLongson, я попробовал <svg shape-rendering = "crispEdges" ... и похоже, что это работает! Большое спасибо!
... но мой коллега заметил, что это ломает плавные линии, такие как углы скругленных прямоугольников. Постараюсь сделать другой образец.
В этом случае вам необходимо прочитать FAQ по Каиру.
если вам не нужно сглаживание, отключите его с помощью shape-rendering: crispEdges, но посмотрите cairographics.org/FAQ/#sharp_lines, чтобы узнать, почему вы вообще получаете сглаживание.