All other code aside, this question only has to do with the SVG viewBox attribute at the end of line 8: viewBox="0 0 100 100.
The question is: What formula can I use to pick an arbitrary point and zoom in specifically on that point, keeping the viewBox centered on it.
For example if I alter the code to viewBox="0 0 50 50" the SVG will zoom 50% but it will be stuck centered on point 0, 0 - this is the point that will be centered. I can fiddle with numbers and find center points over time but my question is what formula could I use to keep it centered on a unique point?
Scenerio: If I know I want to zoom to double the size and set the viewBox dimensions to 50 50 How can I find the proper X and Y coordinates on viewBox to keep the SVG centered on an arbituary point such as ( 70, 74 )?
How do I keep the viewBox centered on point ( 70,74 ) when zoom is set to 50 50.
viewBox( ? ? 50 50 ) - Center on ( 70, 74 ). How do I find the missing X and Y values?
circle {
animation-name: pulse;
animation-duration: 4s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 50%;
}
circle + circle {
transform: scale( 0.25 );
animation-duration: 8s;
}
@keyframes pulse {
100% {
transform: scale( 2 );
opacity: 0;
}
}<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://codepen.io/basement/pen/qXMRxX.css">
</head>
<body>
<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
> <!-- How do I zoom 200% and keep viewBox centered on point ( 70, 74 )? -->
<script xlink:href="https://codepen.io/basement/pen/qXMRxX.js"></script>
<circle cx="70" cy="74" r="0.5" fill="#f46" />
<circle cx="70" cy="74" r="0.5" fill="#f46" />
</svg>
</div>
</body>Note how this: How to keep viewBox centered when "zooming" in SVGs? question asks about keeping the viewBox centered only on the center point of the whole SVG. This current question is about how to keep it centered on a specific arbitrary point other than just the center point of the drawing.
Note: I'm not really using any libraries in an attempt to understand the underlying math behind it for future projects. Thank you.
EDIT: The formula provided in the linked question is: centre - newWidth/2. But this doesn't seem to work here. Point ( 70, 74 ) is the center in this case. So for the X value that's 70 - newWidth/2 Because we are zooming 2X here we know newWidth is 50 ( half of 100 ). So 50/2 = 25, 70-25 = 45 for X and 74-25 = 49 for Y. But viewBox="45 49 50 50" Is off center. Point ( 70, 74 ) is below the center and too far right relative to the viewBox. JSFiddle: jsfiddle.net/dndvzj8f. What Am I doing wrong? The linked answer's solution doesn't seem to work here.