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或使用替代方法，例如通过img或object标记嵌入。

<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。

Answer 3

HTML属性id必须始终是唯一的，如果您想使用标识符，请多种方式使用类。

Answer 4

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

id属性指定其元素的唯一标识符（ID）。该值必须在元素的所有ID中唯一。

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

您需要为您的目的使用class属性。

具有相同ID的多个svg

4 个答案: