调整Viewbox以包含svg元素

Question

所以我正在用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

Answer 1

您遇到的问题是因为getBbox()返回的边界框表示该元素的coords的边界，然后该元素被其祖先元素上的Transform属性转换。

如果我们检查该文件,我们会看到元素的父级如下所示：

<svg>
  <g id="north-america" transform="translate(100.000000, 45.000000)">
    <polygon id="_x32_" ...>

因此在这个特定元素的情况下，它的位置实际上是从getBbox()返回的位置向右100和向下45的点。

如果我们黑掉这些偏移量，你就能看到它起作用了。

显然，这不是一个通用的解决方案。

这个问题没有一个非常简单的解决方案，但下面是您可以尝试的几种方法：

>

通过将SVG应用于路径和多边形，更改SVG以移除所有转换。此堆栈溢出问题描述了使用Inkscape实现此目的的一些方法。

我相信RaphaelJS库有一个函数可以返回转换后的包围盒。请参阅element.getBbox（）。

您可以将元素及其祖先克隆到单独的 中，然后在 上调用getBbox()。即创建一个简化的SVG，它看起来像这个答案中的代码块ealier中的SVG( )。