javascriptを使用してIDが競合するSVGを挿入する

Question

javascriptを使用してドキュメントに挿入されたSVGは、内部に競合するIDを持つシンボルがあるため、ぎこちないように見えます。例えば、これらの二つの異なるSVGファイル

http://filebin.ca/1LMtJr5zc2x/svg1.svg

http://filebin.ca/1LN9F5ZPIbH/svg2.svg

* JavaScriptを使用して文書に挿入すると、そのうちの一つは、（私の場合には、AがXのになっています）間違って見えます。あなたはテキストエディタでSVGファイルを開く場合は、どちらもだから私はブラウザを推測している。この

<symbol overflow="visible" id="glyph0-0"> 

のような行を持って表示されますして、第2のSVGの参照「glyph0-0」を見て、定義されたものを使用しています最初に svg。ブラウザに "< svgの中に定義されているシンボル"しかありません。シンボルの範囲を制限するように。

< img>これらの2つのファイルを指すタグにはこの問題はありません。しかし、私はそのソリューションを使用していないので、サーバーはファイルをたくさん残し、いつ放棄できるのかを把握する必要があります。私の現在のソリューションでは、ブラウザにはSVGがメモリーされており、ウィンドウが閉じると消えてしまいます。

* XMLHttpRequestを使用して、動的に生成されたSVGファイルを取得し、ルート<のsvg>タグをクローンしてドキュメントに追加します。

Answer 1

IDは常にドキュメントに対してグローバルであり、一意でないIDはHTML仕様に従って無効と見なされます。同じIDを持つために2つのシンボルが必要な場合は、 "id"の代わりに "class"を使用してみてください。 IDを調整して一意になるようにSVG文字列の正規表現の前処理を行うこともできます。