SVGの座標やサイズを取得する便利関数”getBoundingClientRect()”

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ここ最近、WEBページコーディングで、SVGコントロールをする場面が増えてきました。
 

デザイン重視のWEBページアニメーションを行なったり、グラフツールのインタラクティブ操作をする場合など、svgオブジェクトの座標やサイズをその場で取得したい場合に、そのエレメントの属性取得をするだけでは機能的に足りていない場合があります。
 

gタグなどは、下層のオブジェクトサイズに依存したサイズになってしまいますが、通常のエレメントのようにoffsetWidthなどでサイズ取得ができません。
 

そんな時は”getBoundingClientRect()”関数を使うことで便利にサイズや座標が取得できます。

getBoundingClientRect()の使い方

svgオブジェクトは、通常的なHTMLエレメントのような情報取得ができません。
 

主に、サイズと座標に関しては、以下のようにgetBoundingClientRect()を使って情報取得をしましょう。
 

 

 

offsertLeftとoffsetWidthの値が”undefined”になっているのがわかりますが、”getBoundingClientRect()”の値ではバッチリ取得できています。
 

通常のinlineオブジェクトにも使える

getBoundingClientRect()関数は、HTMLのエレメントに対しても使用できます。
 

ただし、HTMLエレメントは、offsetホニャララでだいたい値が取得できるのですが、最も便利に使えるのは、left,topが絶対座標で取得できるという点です。
 

offsetLeftとoffsetTopは、上位エレメント内での座標を取得するだけで、絶対座標の取得は、階層を遡って座標を他仕込んでいかなければいけません。
 

下記のサンプルソースでご確認ください。
 

 

 


 

ちなみに余談ですが、サンプルのようにmarginを設置すると、それも座標に反映されるようです。
あくまでエレメントの本体座標という事を認識していれば大丈夫ですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です