2013年7月31日水曜日

document.createElementNSとSVGオブジェクトの生成

1つ前の投稿とも絡んだこと。

var x = new SVGMatrix();

とか実際にChromiumなどのコンソールで試すと、
TypeError: Illegal constructor
とか怒られて失敗に終わる。

原因は2段階あって、まずは1つ目

SVGMatrixを生成する為には<svg>要素のメンバー関数createSVGMatrixで行う。
しかし、TypeScriptのインテリセンスでちらりと確認してみてもHTMLSVGElementとか無いし、SGVElementも無いらしく、SVGRectElementとか出てくるのみ。

ちなみに、 new SVGRectElement() などコンソールで試してみても冒頭と同様のエラーとなる。

そこで、コンソールで document.createElement('svg') とかしても、どうも真っ当なSVGオブジェクトを生成できず、単にHTML的にSVGというタグ名が付いただけのドキュメントオブジェクトが生成されてしまうだけ。

はて…さて…と、思ってStackOverflowやgoogleで調べてみると、原因の2段階目が明らかに。

どうやら由緒正しいSVGオブジェクトの生成にはそもそも名前空間から指定しなければならず、document.createElementNSを使わないとならなかったらしい。
そんな訳でまとめると、SVGMatrixを使うためには、

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var svg_matrix = svg.createSVGMatrix();

と、すればOK。


<おまけ: TypeScriptの場合>

var svg: SVGSVGElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var svg_matrix = svg.createSVGMatrix();

とか、

createSVGMatrix()
{ return  (<SVGSVGElement>document.createElementNS('http://www.w3.org/2000/svg', 'svg')).createSVGMatrix(); }

こんな感じで<SVGSVGElement>型アノテーションを使う。

0 件のコメント:

コメントを投稿