在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