@cubooks
Web-developer

Как решить проблему с SVG?

Добрый день!

У нас на сайте все иконки сделаны в SVG формате, и задаются через CSS стили. Иконки везде отображаются более менее нормально, а вот в Mozila Firefox они сдвигаются на 7-8 пикселей вниз. Не подскажите, как исправить данный недочёт?

https://yadi.sk/i/U0VSaENtfeV2j - отображение в браузерах Chrome, Opera и проч.
https://yadi.sk/i/eWMVHVj-feVH4 - отображение в браузере Mozilla Firefox.
8b.kz/fr8v - сайт
  • Вопрос задан
  • 210 просмотров
Решения вопроса 1
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
По ходу нашел решение на основе этого stackoverflow.com/questions/19076655/svg-sprite-ba...
В общем в background-size: необходимо указывать не только x но и y величину. На основе того, что у вашего оригинального svg спрайта (gamma.antikvarus.ru/themes/frontend_v2/images/svg/...) значения 960/560 (основываясь на viewBox), а на сайте у вас background-size: 424px; то в итоге получил такое значение
background-size: 424px 247px;
Как только его поставил, позиция svg стала одинаковой в хроме и фф, а если точнее, то стала как в ff, то есть смещенная вверх.
Тестировал на основе иконки логина (Вход), у которой по умолчанию было background-position: -65px -28px;
Вот так с измененными значениями (-22px вместо -28) выглядит в хроме
XXAwS7e.png
а так в FF
IwmW7BX.png

Так что просто добавляете y значение для background-size и увеличиваете y значение background-position на 6px.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
swipeshot
@swipeshot
Учусь на ошибках.
Вообще, ненавижу когда на сайтах ставят SVG икноки. Например, когда я захожу на Тостер через мою Люмию (а в ней IE?), то иконки просто напросто не отображаются. Вообще, во всех браузерах на WinPhone не отображаются.

ЗЫ: простите за реплику, а не за ответ.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы