1

DOM apiを使用してJavascript内からSVGフラグメントを作成する方法についていくつかの例を見てきましたが、innerHTMLに似た文字列からSVGフラグメントを作成するために使用できるものがあるかどうか興味があります。私はこれを次のように試しました：

var svg = '<foreignObject><body xmlns="http://www.w3.org/1999/xhtml"><p>Hello World</p></foreignObject>'
var range = document.createRange();
return range.createContextualFragment(svg);

問題は、Chromeの例外を除いてSVGが爆発するcreateContextualFragment（）です。それで、これを行うためのクロスブラウザの方法はありますか？

4

2 に答える 2

3

これが私がしたことです：

parseXML('<foreignObject xmlns="http://www.w3.org/2000/svg"><body xmlns="http://www.w3.org/1999/xhtml"><p id="seriesTitle"></p><p id="seriesValue"></p><p style="margin:0;text-align:center;" id="seriesDate"></p></body></foreignObject>')

parseXml（）はクロスブラウザでサポートされているわけではないので、このコードを一番上に表示します。

if (typeof parseXML=='undefined') {
    window.parseXML = function (s,doc) {
        doc = doc || document;
        var doc2=(new DOMParser()).parseFromString(s, "text/xml");
        return doc.adoptNode(doc2.documentElement);
    }
}

次に、jQueryを使用してフラグメントの代わりにクエリを実行し、必要な値を設定できます。

jQuery('#seriesTitle', detailChart.mytooltip).text( point.series.name );
jQuery('#seriesValue', detailChart.mytooltip).text( point.y );
jQuery('#seriesDate', detailChart.mytooltip).text( date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() );

問題は、VMLがforeignObjectのようなものをサポートしていないことです。SVGは、HTMLの問題をすべて抱えていないアプリケーションを構築するための優れたソリューションに非常に近いものです。

于 2011-01-04T22:07:27.533 に答える
1

のようなものが必要な場合innerHTMLは、元のコードで範囲に要素を選択させて、適切なパーサーコンテキストを設定する必要があります。次に、Chromeはhttp://crbug.com/107982を修正する必要があります

バグが修正されたと仮定して、SVGフラグメントを解析する方法は次のとおりです。 https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#L184

その間に、私はあなたと非常によく似た解決策を思いつきましたが、それはDOMParserSVGコンテンツを扱っていると言っています。あなたの解決策はあなたの特定のケースに適していると思いますが、私のコードは少し近いですinnerHTML（実際には私は一致することを目指していinsertAdjacentHTMLます）。

https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#L169

于 2011-12-19T06:19:18.700 に答える