Currently, I am working on creating a map using SVG where users can zoom into a specific area within the SVG, such as a state or country. I came across a helpful tutorial that demonstrates this functionality along with animation. The tutorial can be found here: https://css-tricks.com/interactive-data-visualization-animating-viewbox/ You can also view their codepen example here: https://codepen.io/sdras/pen/512230ed732f9b963ad3e50c8d4dcbb8
However, I am facing issues when trying to replicate this behavior with my own SVG. When I specify to zoom into a particular area, it ends up zooming into a different region instead. Despite attempting to mimic their code structure exactly, I have not been successful. It seems like the problem may lie within my own SVG file.
Here is an excerpt from my HTML:
<svg id="foo" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 776">
There is a lot more code necessary for this project which I cannot paste entirely here due to its length.
SASS snippet:
html
body
svg
width: 100vw
height: 100vh
JQuery script:
var test = document.getElementById("_x32_");
console.log(test);
var s = test.getBBox();
//check the console for the SVGRect object
console.log( s );
//we store the values from the object as our new viewBox string
var newView = "" + s.x + " " + s.y + " " + s.width + " " + s.height;
console.log(newView);
//we then set the new viewBox string as the viewBox attribute on the SVG
var foo = document.getElementById("foo");
console.log(foo);
//foo.setAttribute("viewBox", newView);
You can access my CodePen implementation here: https://codepen.io/mat148/pen/xqWMXR