使用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">

所以我猜测浏览器会看到第二个svg引用“glyph0-0”，并使用第一个 svg定义的引用。有没有办法告诉浏览器“在＆lt; svg＆gt;内部定义的符号”？就像限制符号的范围一样。

＆LT; IMG＆GT;指向这两个文件的标签没有这个问题。但是，我没有使用该解决方案，因为服务器必须保留一堆文件，并跟踪它们何时可以被丢弃。使用我当前的解决方案，浏览器在内存中有SVG，当窗口关闭时它们就消失了。

*使用XMLHttpRequest，我获取动态生成的SVG文件，克隆根＆lt; svg＆gt;标记并将其附加到文档中。

Answer 1

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