How to scale svg relative to the mouse cursor?

Question

Layout

Hello!
Tell me how you can scale svg relative to the cursor, I can count the mouse coordinates, I can also apply transformations to svg, but I don’t understand how to compare the point where the scroll was and the svg, which is already inscribed on the screen with some kind of scale

Answer 1

If you set it as a background, then what will you do with adaptability?
Lay everything out with Grid, and use empty blocks. which will play the role of dashed lines with border: dashed, and the sides you want, for example, just border-left and border-bottom, with border-radius. Grid to the rescue. Either pseudo-classes or absolute positioning
. Just in case, I'll leave it here. Empty blocks (red border) that have border only on the side you want. Blue scribbles cross out those sides of the empty block that are not needed. And then it's a matter of technique and the ability to work with Grid

Answer 2

Try to build on the difference in the coordinates of the place where the scroll was and the center of the svg element.