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

Question

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

当使用 javascript* 插入文档时，其中一个看起来是错误的（在我的情况下，a 变成了 x）。如果您使用文本编辑器打开 SVG 文件，您会看到它们都有这样的一行

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

所以我猜浏览器会看到第二个 svg 引用“glyph0-0”并使用第一个 svg 定义的那个。有没有办法告诉浏览器“在 <svg> 中定义的符号只在那里重要”？就像限制符号的范围一样。

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

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

score 2 · Accepted Answer

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

1 回答 1