Проблема с Svg в Firefox?

Question

[Егор Лавренов]

Вот так отображается в FireFox

Вот так в опере и хроме

В firefox неккоректно отображается иконка тележки, а иконка рубля и вовсе не отображается
На счет иконки тележки, ощущение что FireFox игнорирует viewbox у svg элемента.
Вставляю через тег use
В чем может быть проблема?

Comments

[TheBububo]

ссылку на codepan или т.п. По скриншоту нельязя решить проблему

[Егор Лавренов]

TheBububo, https://codepen.io/SkuvaWeb/pen/pLgBZy

Answer 1

[Odisseya]

В символе корзины уберите атрибуты width & height, чтобы получилось:

<symbol id="svg-shoping-cart"  viewBox="0 0 118.08 96.5">

Так, иконка будет масштабироваться по размеру контейнера. Чтобы ограничить размер иконки, укажите его в <svg>, а потом, если нужен кастомный размер, через css переопределите его.

Answer 2

[Александр Талалаев]

Чаще всего проблема в том что не заданы параметры width и height у viewport
viewBox="0 0 500 200" width='500px' height='200px'
Не обязательно в пикселях, и в целом это не ограничивает дальнейшее масштабирование svg через css или как-то иначе, но позволяет многим браузерам правильно подсчитать размеры изображения.

Answer 3

[Егор Лавренов]

Прилагаю codepen https://codepen.io/SkuvaWeb/pen/pLgBZy

Answer 4

[Алексей Захаров]

у иконки корзины #svg-shoping-cart ширину уберите инлайновую

Answer 5

[BoBiKs]

https://codepen.io/anon/pen/RMaNVB