2016年6月16日木曜日

jQueryでSVG要素の幅と高さを取得できない

SVGのTextをjQueryで扱い様々な値を取得してみる - Qiita
http://qiita.com/ryo-ma/items/6f066f178df32614b6be


var $text1 = $("#text1");  var $text2 = $("#text2"); 

値を取り出すには

取得する値 メソッド
座標x getAttribute("x")
座標y getAttribute("y")
width getBoundingClientRect().width
height getBoundingClientRect().height
色 getAttribute("fill")

getAttribute("属性名");で属性を取得できます。
値を変更する場合はsetAttribute("属性名","セットする値")でセットします。


$text1[0].getAttribute("x");//100  $text2[0].getAttribute("fill");//blue 

getAttributeで返ってくる値は文字列となる。
セットするときも同様に文字列でセット。

jQueryとして↓


$text1.attr("x");//100  $("text2").attr("fill");//blue 

のように属性を取り出すこともできます。
返ってくる値は文字列です。
値をセットするときも同じくattr("属性","セットする値で")でセットします。

0 件のコメント:

コメントを投稿