所以我正在用svg开发一个地图，我希望能够根据用户输入缩放到svg中的预定义区域（一个州或国家）。我找到了一个教程，该教程既能做到这一点，又能对其进行动画化，在这里:https://css-tricks.com/interactive-data-visualization-animating-viewbox/ith codepen在这里:https://codepen.io/sdras/pen/512230ed732f9b963ad3e50c8d4dcbb8

现在我在用自己的SVG复制这方面遇到了问题。当我让它缩放到某个区域时，它会缩放到另一个区域。我尝试过复制他们代码的精确结构，但没有成功。我开始认为错误是在我的SVG本身。

HTML：

<svg id="foo" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1440 776">

那么在这里复制和粘贴的代码太多了。

萨斯：

html
  body
    svg
      width: 100vw
      height: 100vh

jQuery：

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);

代码页在这里：https://CodePen.io/mat148/pen/xqwmxr