Question

我将多个SVG图片嵌入到单个HTML页面中。每个SVG都有自己的defs部分，我在use元素中引用了该部分。看起来我无法在多个defs内定义具有相同ID的元素并引用它。第二个SVG use将从第一个SVG defs部分中选择定义，并忽略本地重新定义。

有人知道我如何引用LOCAL defs部分吗？

Chrome和Firefox中的相同故事。

请参阅以下示例：

<html><head></head><body>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="40" width="40" style="fill:#00F;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="20" width="20" style="fill:#F00;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
</body></html>

Answer 1

具有多个相同ID的SVG文件对于http://www.w3.org/TR/SVG/struct.html#IDAttribute

无效

您的选项要么使所有ID都唯一，要么将SVG移动到单独的文件中，并通过<object>或<iframe>标记引用它们。

Answer 2

我创建了一个随机化定义ID的工具，以避免内联svg引用同一个#id的问题，希望它对其他人有用。 http://hugozap.com/randomize_svg_def_ids.html

Answer 3

解决此问题的一种方法是使用 svgo

GroupTotalInstances

svgo 可以通过 npm 安装，也可以作为库使用

如何在SVG中“使用”本地“defs”

3 个答案: