Why firefox and chrome work differently with svg (snap.svg)?

Question

css

Good afternoon, I ran into a problem and I can not understand its roots.
To create an interactive map, I use the snap.svg library.
The problem arose when I needed to move the card a little.
To do this, I used the transform: translateX(100px) rule. Firefox moved, chrome does not.
I created a simple example where you can see the difference in position:
dailybmw.ru/svg_test/test.html I
also noticed that if you select the svg code of the image itself with the browser inspector, then in chrome the border of the image is clearly according to its size, and in firefox from the height is 100%, and the width is from the left edge of the picture to the right edge of the monitor.
I cannot set the width and height directly in the header of the svg file, because I need a scalable image, but I don't want to write a bunch of transform: scale(x) rules to guess the size.
Thank you!

Answer 1

about the transform problem https://www.youtube.com/watch?v=xxZzGOBkDP8