How to keep viewBox centered when “zooming” in SVGs?
Often I use the viewBox attribute to "zoom" a SVG element. Zoom is accomplished of course by using lower width and height values for the viewBox attribute - but the x and y values are tricky to figure out for keeping the scene centered. Below is a snippet where viewBox="0 0 100 100" . ( x y width height ) This is my starting point. The scene is to scale and starts at the top left corner. <head> <link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css"> </head> <body> <iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr" id="grid" ></iframe> <div class="wrp"> <!--