Почему firefox и chrome по разному работают с svg (snap.svg)?

Question

[smithana]

Добрый день, столкнулся с проблемой и не могу понять её корни.

Для создания интерактивной карты я использую библиотеку snap.svg.
Проблема возникла когда мне карту понадобилось сдвинуть чуть с места.
Для этого я воспользовался правилом transform: translateX(100px). Файрфокс подвинул, в хром нет.
Создал простой пример, где видно разница в позиции:
dailybmw.ru/svg_test/test.html

Также заметил, что если инспектором браузера выделить svg код самой картинки, то в хроме границы картинки чётко по её размеру, а в файрфоксе от высота 100%, а ширина от левого края картинки, до правого края монитора.

Ширину и высоту непосредственно в заголовке svg файла я задать не могу, т.к. мне нужна масштабируемая картинка, а писать кучу правил transform: scale(x), чтобы подгадать размер не хочется.

Спасибо!

Answer 1

[Дмитрий Христоев]

про проблему transform https://www.youtube.com/watch?v=xxZzGOBkDP8

Comments

[smithana]

всё видео, о проблеме со св-вом rotation. И так до конца и не понял, в случае проблемы из видео единственное решение это js?

у меня немного другая ситуация. Как вы видите по коду, у меня есть внешний svg контейнер, в который библиотека snap.svg помещает из файла рисунок svg.

Так вот с помощью св-ва transform: translateX(100px) я могу сдвинуть внешний svg контейнер, но мне надо подвинуть именно внутренний.
Т.к. в файрфоксе и в хроме сам svg рисунок имеет разную ширину и смещение контейнера svg смещает в разных браузерах внутренний рисунок на разное расстояние.