svg要素を含むようにViewboxを調整する

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の位置で右へと4534から位置getBBox()に戻ります。

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()を呼び出すには、要素をクローニングすることにより、それを自分で行い、それの祖先。つまりこの答え（<svg><g..><polygon>）のコードブロックのような単純なSVGを作成してください。