我有多个SVG图片嵌入到单个HTML页面中.每个SVG都有自己的defs部分,我在我的use元素中引用它.看起来我无法在多个内部定义具有相同id的元素defs并引用它.第二个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>