Question

所以我正在开发一个带有svg的地图，我希望能够将用户输入缩放到我的svg（州或国家）内的预定义区域。我找到了一个教程，它完成了这个以及动画，它在这里：https://css-tricks.com/interactive-data-visualization-animating-viewbox/ 他们的代码也在这里：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属性转换为＃39; s ancestor elements。

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

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

因此，在这个特定元素的情况下，它实际上是位于右侧100点的位置，而位置getBBox()返回45位。

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

显然，这不是一般解决方案。

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

通过将SVG应用于路径和多边形，更改SVG以删除所有变换。 This Stack Overflow question describes some ways to do that with Inkscape.
我相信RaphaelJS库有一个可以返回转换边界框的函数。 See Element.getBBox().
通过将元素及其祖先克隆到单独的<svg>然后在getBBox()上调用<svg>来自行完成。 IE浏览器。创建一个简化的SVG，看起来像这个答案中代码块中的那个（<svg><g..><polygon>）。

调整Viewbox以包含svg元素

1 个答案: