具有相同ID的多个svg

Question

我可以在html页面中放置多个svgs并在所有这些页面中使用相同的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>

Answer 1

由于规范将id属性定义为每个文档的唯一属性,因此您应该重构ID或使用替代方法,例如嵌入via img或objecttag.

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

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

Answer 2

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

SVGInject在<defs>节中定义的元素的 ID 末尾添加一个随机字符串。例如，svgPath可能会变成类似svgPath-Dcs83KsE. 其他 SVG 注入器向 ID 添加一个运行编号。

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