#firefox #svg
#firefox #svg
Вопрос:
Я работаю с SVG в первый раз и столкнулся с этой проблемой:
Я использую некоторые SVG для значков, и все работает нормально — за исключением одного значка, который неправильно отображается в Firefox в Windows. Firefox на OS X, однако, делает это просто отлично.
Вот анонимизированная версия заголовка, в который я помещаю значки SVG:
http://files.uiux.de/140618_header/
Эта проблема сохраняется независимо от того, использую ли я спрайт, используемый в приведенном выше примере, или если я использую отдельные файлы для каждого значка.
Вот два скриншота проблемы с рендерингом, с которой я столкнулся. Проблема в небольшой «вмятине» на нижнем конце этого наушника:
Мы сохранили эти SVG в Illustrator и использовали SVG 1.1 в качестве параметра экспорта.
Может ли кто-нибудь указать, в чем здесь проблема?
Ответ №1:
Я не вижу этой ошибки в заголовке примера, когда смотрю на нее с моей версией FF (30).
Мне кажется, что артефакт / «вмятина», которую вы видите, вызвана крайним левым столбцом пикселей значка конверта рядом с телефоном на листе спрайтов. Вы можете определить, увеличив масштаб изображения.
Что я делаю, чтобы убедиться, что подобных вещей не произойдет, так это не размещаю значки рядом друг с другом в таблице спрайтов. Оставьте между ними зазор в несколько пикселей.
Комментарии:
1. Спасибо за ваш ответ! У меня есть локальная версия этого кода, которая не использует таблицу спрайтов, и я все еще получаю этот артефакт на значке телефона в Windows 7 в последней стабильной версии Firefox. В OS X все, кажется, рендерится просто отлично.
2. Это странно, потому что я тоже использую Win7, и SVG и заголовок примера отображаются нормально для меня.
3. Это действительно странно. До сих пор на каждой машине под управлением Win 7, с которой я тестировал это (включая Browserstack), была эта проблема.