36

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

有人知道我如何参考 LOCALdefs部分吗？

Chrome 和 Firefox 也是如此。

  1. 请参见下面的示例：

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

3 回答 3

12

根据http://www.w3.org/TR/SVG/struct.html#IDAttribute，具有多个相同 ID 的 SVG 文件无效

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

于 2013-04-20T21:51:54.357 回答
2

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

于 2018-03-08T03:35:16.157 回答
1

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

svgo --enable=prefixIds *.svg

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

于 2021-01-28T03:05:59.900 回答