While implementing my new about page, I wanted to include at least one tiny interactive bit. Since I'm really not that creative, my first idea was a map of Germany, with cute little circles highlighting the cities I lived in until now. They could also do an animation when someone hovers on the city names! How wonderful would that be!

What I thought should be a five minute thing got a bit out of hand and had me googling and asking my friends over days. Why doesn't it work? I did everything the right way! It's not the first time I'm animating a SVG!

Well, this quick video shows the problem: On hover I wanted to resize the circles using transform: scale(2). But unfortunately the circles moved out of the map. But I set transform-origin: center center;. What possibly could be wrong??

The solution is using transform-box: fill-box. It's that easy. I never heard of this property, but if you don't use it, the transform-origin seems to be the center of the whole SVG. Thanks to Daniel for leading me to the correct google search terms.