web-dev-qa-db-ja.com

SVG：ページに対する要素の位置を取得する

ユーザーがSVGダイアグラムの要素をクリックしたときに、オーバーレイ（html div）を表示したいと思います。私が抱えている問題を視覚化するために、SVG画像に6つの要素の水平方向の行があると仮定します。クリックイベントで、要素の座標を取得し、それらを使用してその横にオーバーレイを表示します。問題は、要素を左から右にクリックすると、要素とオーバーレイの間の水平オフセットが小さくなり続けることに気付くということです。つまり、6番目の要素は、最初の要素よりもはるかに近くにオーバーレイを表示します。これはChromeとFFの両方で発生します。オーバーレイが要素自体をカバーすることがあるため、これは問題です。

最初はJQueryのposition（）プロパティを使用していましたが、これは上記の動作を示しませんでしたが、ChromeとFirefoxで非常に異なる値を返しました。さらに、公式にはサポートされていません。 svg要素に対するJQuery。そこで、DOMの標準offsetLeftとoffsetTop、およびsvgのx.animVal.valueプロパティと、Webで見つけたさまざまなライブラリを試してみましたが、すべて同じ不規則なオフセットの問題があります。これが発生すると思いますsvgイメージがスケーリングされているため、それを含む実際のhtmlドキュメントに対するsvgの要素位置を取得する方法を探しています。これを行う方法はありますか？

javascriptjqueryhtmldomsvg
13
JayPea

3月以降何かがうまくいかなかった場合（そしてこの問題を抱えている他の人のために）、SVGノードでgetBoundingClientRect()を試してください。

ドキュメントに対する上、下、左、右、幅、高さを指定するClientRectオブジェクトを返します。これを使用して、Twitter Bootstrap popovers（divs）をSVGrectsの隣に配置することができました。

31
Adam Mayer

jQueryのposition()はSVG要素ではうまく機能しません。 チケット そのためにあります。

ネイティブSVGメソッドgetBBox()を使用して、SVG要素の位置を取得できます。

例

$('svg circle')[0].getBBox();
8
ndequeker

この小さな関数を使用して、任意の要素（<svg>）のページを基準にした位置座標を取得できます。

function getOffset(element)
{
    var bound = element.getBoundingClientRect();
    var html = document.documentElement;

    return {
        top: bound.top + window.pageYOffset - html.clientTop,
        left: bound.left + window.pageXOffset - html.clientLeft
    };
}

var offset = getOffset（svg）;
var x = offset.left;
var y = offset.top;

ライブデモ： https://codepen.io/martinwantke/pen/rpNLWr

5
Martin Wantke