调整 Viewbox 以包含 svg 元素

Question

所以我正在使用 svg 开发地图，我希望能够根据用户输入放大到我的 svg 中的预定义区域（州或国家/地区）。我找到了一个教程，它可以做到这一点并为其设置动画，这里是：https://css-tricks.com/interactive-data-visualization-animating-viewbox/ 他们的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">

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

SASS：

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

CodePen 在这里：https://codepen.io/mat148/pen/xqWMXR

Answer 1

您遇到的问题是因为getBBox() 返回的边界框表示该元素的坐标边界在它被其祖先元素上的transform 属性转换之前。

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

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

所以在这个特定元素的情况下，它实际上位于从getBBox() 返回的位置向右 100 和向下 45 处。

If we hack in those offsets, you can see it works.

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

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

1. 通过将 SVG 应用于路径和多边形，更改 SVG 以移除所有变换。 This Stack Overflow question describes some ways to do that with Inkscape.

2. 我相信 RaphaelJS 库有一个函数可以返回转换后的边界框。 See Element.getBBox().

3. 通过将元素及其祖先克隆到单独的<svg> 然后在<svg> 上调用getBBox() 来自己操作。 IE。创建一个简化的 SVG，看起来像这个答案 (<svg><g..><polygon>) 中代码块中的那个。