jQueryでSVGを扱う

svg

結論から言うと、セレクタを使ってHTML要素を取得するくらいしかjQueryは使えなさそう。
addClassとかつかってスタイルを変えれれば便利なんだけど、できなかった。

例えば次のような直線をひくとする。

<svg id="svg1">
  <line x1="100" y1="100" x2="200" y2="300" stroke="#000" class="cls1"/>
</svg>

SVG要素作成

jQueryを使って次のように書きたいけどこれだとダメっぽい。

  var $line = $('<line>');

どうすればいいかというと、

  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

SVG要素の属性設定

jQueryを使って次のように書きたい(ry

  $line.attr('x1', '100').attr('y1', '200');
  $line.addClass('cls1');

どうすればいいかというとsetAttributeメソッドを使う

  line.setAttribute('x1', '100');
  line.setAttribute('y1', '200');
  line.setAttribute('class', 'cls1);

getAttributeメソッドで属性を取得できます。
CSSクラスを追加、削除する場合は文字列操作等の処理が必要になります。

SVG要素をHTMLに追加

これはjQuery使ってもOKです

  $('#svg1').append($line);
  // もしくはjQueryオブジェクトじゃなくてもいい
  $('#svg1').append(line);

もちろんjavascriptのdomのappendChildメソッドを使ってもいいです。

  var svg = document.getElementById('svg1');
  svg.appendChild(line);

HTMLからSVG要素を取得

これはjQuery使ってもOKです

  var $line = $('line');

ただし、これらの要素を操作するためにはjQueryオブジェクトのままだとダメでDOMを操作する必要がある。

  // こんな感じにしたり
  $line[0].setAttribute('x1', '150');
  // こんな風にしたり
  $line.each(function(){
    var line = this;
    var cls = line.getAttribute('class');
    line.setAttribute('class', cls + " selected");
  });