SVG特集最終回
特集:スタートアップ 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);
ついでに、OperaとFirefoxがサポートする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がサポートされていました。