使用javascript插入具有冲突ID的SVG

Question

使用javascript插入到文档中的SVG看起来像乱码，因为它们内部具有冲突ID的符号。举例来说，这两种不同的SVG文件

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

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

当插入的JavaScript文件*，其中一人看起来错误（对我来说变成X的A的）。如果你打开一个文本编辑器SVG文件，你会看到他们都有这样的

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

所以我猜浏览器中的线看到第二SVG参考“glyph0-0”，并使用所定义的一个由第一张 svg。有没有什么方法可以告诉浏览器“只有在那里才能定义的符号”？就像限制符号的范围一样。

< img>指向这两个文件的标签没有这个问题。然而，我没有使用这个解决方案，因为那时服务器将不得不保留一堆文件并跟踪它们何时可以被扔掉。使用我目前的解决方案，浏览器在内存中具有SVG，当窗口关闭时它们不见了。

*使用XMLHttpRequest，我获取一个动态生成的SVG文件，克隆根目录并将其附加到文档中。

Answer 1

ID始终是文档的全局ID，根据HTML规范，非唯一ID将被视为无效。如果您需要两个符号才能拥有相同的ID，请尝试使用“class”而不是“id”。您也可以对SVG字符串进行一些正则表达式预处理来调整ID，以便它们是唯一的。