多个具有相同ID的SVG

Question

我可以在一个HTML页面中放置多个SVG，并在所有SVG中使用相同的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

---

ID必须始终是唯一的。 - Huelfe

Answer 1

由于规范定义了id属性在每个文档中是唯一的，因此您应该重构ID或使用替代方案，例如通过img或object标签进行嵌入。

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

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

- Pinke Helga

---

一个SVG图像也是一个文档。 - Константин Ван

@КонстантинВан 是的，但是当它被嵌入到HTML文档中时，它会继承SVG id。内联iframe文档也可能出现同样的问题。 - Pinke Helga

Answer 2

如果您需要将SVG内联，您应该考虑使用SVG注入器，它在将SVG插入HTML文档时将ID更改为唯一字符串。 SVGInject会在<defs>部分定义的元素的ID末尾添加一个随机字符串。例如，svgPath可能会变成像svgPath-Dcs83KsE这样的字符串。其他SVG注入器则会将ID添加一个递增的数字。

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

- Waruyama

Answer 3

在你的HTML中，你不能写多个id属性。id属性在HTML文档中必须是唯一的。

id属性指定了元素的唯一标识符(ID)。该值必须在元素中所有ID中是唯一的。

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

你需要使用class属性来达到你的目的。

- Mohammad

---

这是一个非常糟糕的规范，不适合参考。HTML 4.01本来就不允许使用<svg>元素。 - Quentin

参考资料是关于HTML 5的。 - Mohammad

当时发表评论的时候还不是这样。编辑历史记录很清楚。（而且2011年的HTML 5草案现在也不是一个好的参考，2016年也不是）。 - Quentin

@Quentin 我知道这一点，但用户没有查看参考网址，却因为你的旧评论而对我进行投票。所以我发表了评论来防止这种情况发生。 - Mohammad