読者です 読者をやめる 読者になる 読者になる

SVG特集最終回

SVG JavaScript

特集:スタートアップ SVG|gihyo.jp … 技術評論社最終回が公開されました。
なるべく実用的で且つ面白そうなネタを考えていたんですが、結局無難なグラフにしました。
SVGの場合大きく描画しても重くないので、その辺は活かせるように拡大モードを追加してみたり。
今回の記事の前半ちょろっと書いたtext/htmlなページへのSVGの取り込みはhttp://ss-o.net/test/svg/svg_load.htmlにcreateLSParserとかdocument.loadとかのパターンも含めたサンプルを置きました。
ついでなの少し紹介すると、OperaはcreateLSParserをサポートしているので、こんな感じで動きます。あ、createLSParserというのはDOM Level 3 Load and Saveで定義されているAPIです。

var parser = document.implementation.createLSParser(DOMImplementationLS.MODE_SYNCHRONOUS, null);
var svgdom = parser.parseURI(src);
root.appendChild(document.adoptNode(svgdom.documentElement));

ただ、Web Technologies for Opera Web Applications - Dev.Operaの方法ではなぜか動かない…。まあ、深く突っ込まないことにします。

var parser = document.implementation.createLSParser(DOMImplementationLS.MODE_ASYNCHRONOUS, null);
parser.onload = function(evt){//Operaでも動かない…
	var svgdom = evt.newDocument;
	root.appendChild(document.adoptNode(svgdom.documentElement));
};
parser.parseURI(src);

ついでに、OperaFirefoxがサポートするdocument.loadだとこんな感じに。

var xmldom = document.implementation.createDocument('', 'svg', null);
xmldom.onload = function(){
	root.appendChild(document.adoptNode(xmldom.documentElement));
};
xmldom.load(src);

document.loadはChromeサポートする気はありそうだし、ちょうど(b:id:vantguardeより)Reluctantly define document.loadが。
まあ、XMLHttpRequestで良いような気もしますが。
IE9pp3さんはinnerHTMLに突っ込むくらいしかsvgを取り込む方法を見つけられませんでした。まあ、ある意味将来的には標準になると思われるんですが…。まあ、まだベータでもないので今後に期待しています。
と思ってたら、IE9beta(pp5)でDOMParserとXMLSerializerがサポートされていました。