如何在SVG中使用local local defs

我在单个HTML页面中嵌入了多个SVG图片。每个SVG都有自己的defs部分，我参考了我的use元素。它看起来像我不能在多个defs内定义具有相同ID的元素并对其进行引用。第二个SVG use将选择第一个SVG defs部分的定义，并忽略本地重新定义。如何在SVG中使用local local defs

有没有人知道我可以参考本地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>

来源

2013-04-20 drom

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

您的选项无效要么让所有的ID唯一或移动SVG分成不同的文件并通过<object>或标签进行引用。

来源

2013-04-20 21:51:54

我无法使用外部SVG文件。因为我使用javaScript在页面内部生成SVG。 [我的代码]（http://wavedrom.googlecode.com/svn/trunk/tutorial.html）。所有ID都是唯一的;所以我正考虑在''文件中嵌入的每个' drom 2013-04-21 22:44:26

在这种情况下，您需要生成全局唯一的ID。 – 2013-04-22 14:36:48

+10

问题不在于SVG文件中有多个相同的ID，而是HTML文件中有多个内联SVG，恰好在defs部分中使用相同的ID。如果SVG是外部的，则ID不会发生冲突，只有它们是内联的。令人惊讶的是，我认为ID在SVG中是独一无二的。但是有道理的，因为它们在HTML中被内联时都会成为同一个DOM的一部分。虽然令人讨厌。 – rlovtang 2015-03-19 16:09:46

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

来源

2018-03-08 03:35:16

如何在SVG中使用local local defs

回答

相关问题