What property in svg can give more room for animation?

Question

css

The assignment is a little crazy. When hovering, it is necessary that a separate item increase. From the left and from above, everything is basically stable, but for everyone, except for the "case". the corner at the top is cut, and hovering to the right and bottom only works when hovering at the very base, as if they have no room on the side. where to animate I played around with width-height - it seems to be enough for rampant animation.
Why do they not have enough space for scale, and how can this be fixed?
https://codepen.io/alexiusgrey/pen/OJjENGL

Answer 1

viewBox="-15 -15 926 735"
true, this will slightly reduce the scale of the picture, but I think you can handle it