調整視圖框以包含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()返回邊框代表的界限之前它被它的祖先元素有10個屬性。

如果我們檢查文件，我們看到你的元素的親子關係是這樣的：

<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.

顯然，這不會是一個通用的解決方案。

沒有一個很簡單的解決了這個問題，但這裏有一些方法可以嘗試：

1. 改變SVG刪除所有的變換，運用他們的路徑和多邊形。 This Stack Overflow question describes some ways to do that with Inkscape.

2. 我相信RaphaelJS庫有一個函數可以返回轉換的邊界框。 See Element.getBBox().

3. 動手做做看通過克隆的元素，它的祖先，一個單獨的<svg>則呼籲<svg>getBBox()。 IE瀏覽器。創建一個簡化的SVG，看起來像這個答案中的代碼塊ealier中的那個（<svg><g..><polygon>）。