2

javascript を使用してドキュメントに挿入された SVG は、ID が競合するシンボルが含まれているため、意味不明に見えます。たとえば、これら 2 つの異なる svg ファイル

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

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

javascript* を使用してドキュメントに挿入すると、そのうちの 1 つが正しく表示されません (私の場合、a が x に変わります)。SVG ファイルをテキスト エディターで開くと、両方に次のような行があることがわかります。

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

したがって、ブラウザは 2 番目の svg 参照「glyph0-0」を認識し、最初のsvg で定義されたものを使用すると推測しています。ブラウザに「 <svg> 内で定義されたシンボルのみが問題になる」ことを伝える方法はありますか? シンボルの範囲を制限するようなものです。

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

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

4

1 に答える 1

2

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

于 2012-05-11T00:21:13.133 に答える