具有相同 ID 的多个 svg

Question

我可以将多个 svg 放在一个 html 页面中并在所有页面中使用相同的 ID 吗？

 <div>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........
  </svg>
</div>

原文由 Elfy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于规范将 id 属性定义为每个文档唯一，您应该重构 ID 或使用替代方法，例如通过 img 或 object de33b-a 嵌入

<img src="my.svg" height="100" alt="alternative Text">

<object type="image/svg+xml" data="my.svg" width="100" height="100"></object>

原文由 Pinke Helga 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您需要内联 SVG，您应该考虑使用 SVG 注入器，它会在将 SVG 插入 HTML 文档时将 ID 更改为唯一字符串

SVGInject 将随机字符串添加到 <defs> 部分中定义的元素的 ID 末尾。例如， svgPath 可能变成类似 svgPath-Dcs83KsE 的东西。其他 SVG 注入器将流水号添加到 ID。

这两种方法的开发都是为了将同一个 SVG 多次注入到 HTML 文档中，而不会产生 ID 冲突。但当然它也适用于具有冲突 ID 的不同 SVG。

原文由 Waruyama 发布，翻译遵循 CC BY-SA 4.0 许可协议