在HTML頁面中動態加載多個SVG文檔

Question

我在HTML頁面中動態加載多個外部SVG文檔並將它們內聯。 但是在第一個SVG文件中定義的lineargradient在隨後的SVG文件中使用相同的id定義了「污染」lineargradient。這意味着第一個加載的線性漸變定義了一個ID替代其他線性漸變定義在其他文件中具有相同的ID。 有關如何在HTML頁面內嵌多個SVG時如何內聯沙盒SVG的想法？

注：使用周圍的SVG標籤嵌入標籤的時候，他們不會「污染」對方

Answer 1

不幸的是，你必須確保你的ID在該文件是唯一的。這是HTML，SVG和其他任何可以像這樣混合在一起的標記的限制。

如果您正在使用服務器端腳本將SVG文件注入到HTML標記中，那麼替換具有唯一標識的ID應該不會太糟糕。

您可能還想看看這裏的importSvgString（）JS函數：http://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js?r=1619#7262