具有相同ID的多个svg

Elf*_*lfy 7 html javascript css svg

我可以在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>
Run Code Online (Sandbox Code Playgroud)

Qua*_*one 6

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

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

<object type="image/svg+xml" data="my.svg" width="100" height="100"></object>
Run Code Online (Sandbox Code Playgroud)

  • 但 SVG 图像 _is_ 也是一个文档。 (3认同)

War*_*ama 5

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

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

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