名前空間uriを憶えずにsvgをスクリプトで操作する

スタンドアロンsvgであれ，html5のインラインsvgであれ，スクリプトを使って内容を操作する際にはsvgの名前空間uri文字列を記述する必要があります．ですが，要素を生成するのにいちいち「http://www.w3.org/2000/svg」と記述するのは非常に骨が折れます．そもそも一字一句間違えずに憶えておくこと自体馬鹿らしいものです．そこで，今回この名前空間uriを暗記せずとも済むtipsを紹介します．

namespaceURIプロパティを使う

svg要素はそもそもdom内部で自分が「http://www.w3.org/2000/svg」に所属する要素であることを知っているはずですから，この内容を取り出すことができるはずで，実際namespaceURIプロパティを参照することでsvgの名前空間uri文字列を抽出できます．

つまり，svgの要素を生成する場合次のように記述できるわけです．

<?xml version="1.0" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <desc></desc>
 <script>
window.onload = function(){
 var svg = document.documentElement;
 var ns = svg.namespaceURI;
 alert(ns);
 var circle = document.createElementNS(ns, "circle");
 circle.cx.baseVal.value = 50;
 circle.cy.baseVal.value = 50;
 circle.r.baseVal.value = 50;
 circle.style.setProperty("fill", "blue");
 svg.appendChild(circle);
};
 </script>
</svg>

コードから冗長なリテラルが省かれすっきりとした印象となりました．

もちろんこれはsvg要素が既に存在している場合に有効な方法で，htmlから動的にインラインsvg要素を追加する場合は素直に名前空間uriを指定しましょう．
（innerHTMLを使って無理矢理svg要素を生成する方法もありますが…）

xlinkはどうするの？

use要素等のxlink:href属性をスクリプトから操作する際，svgと同様にxlinkの名前空間uri文字列が必要となる気がしますが，実はそんなことはありません．
確かにsetAttributeNSメソッドを使うのであれば必要となるのですが，そもそもxlink:href属性はhrefプロパティとして実装されているため，直接内容を操作することができるのです．

useElem.href.baseVal = "hoge.svg#hoge";

但し，中身にアクセスするにはhrefプロパティを直接操作するのではなく，その中のbaseValプロパティを介して行います．これはsvgのsmilアニメーション機構に由来する取り決めであり，このようなものであると憶えてしまいましょう．