JavaScriptと文字列を使用してSVGフラグメントを作成します

StackOverflow https://stackoverflow.com/questions/4510515

  •  12-10-2019
  •  | 
  •  

質問

Dom APIを使用してJavaScript内からSVGフラグメントを作成する方法についていくつかの例を見てきましたが、Internhtmlに似た文字列から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);

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

役に立ちましたか？

解決

だからここに私がしたことがあります：

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頭痛のないアプリケーションを構築するための優れたソリューションに非常に近いものです。

他のヒント

あなたがようなものが欲しいなら innerHTML, 、元のコードには、範囲が要素を選択して、適切なパーサーコンテキストを設定する必要があります。その後、Chromeは修正する必要があります http://crbug.com/107982

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

それまでの間、私はあなたと非常に似たソリューションを思いつきましたが、伝えます DOMParser SVGコンテンツを扱っていること。あなたのソリューションはあなたの特定のケースに適していると思いますが、私のコードはもう少し近いと思います innerHTML （実際、私は一致することを目指しています insertAdjacentHTML).

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top