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，使其独一无二。