javascript - 使用 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 定义的引用。有没有办法告诉浏览器“在

指向这两个文件的

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

*使用 XMLHttpRequest，我获取动态生成的 SVG 文件，克隆根

Answer 1

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