如何“使用"本地"defs"在SVG中 [英] How to "use" local "defs" in SVG
问题描述
我将多个SVG图片嵌入到单个HTML页面中.
每个SVG在我的use元素中都有自己的defs部分.
看来我无法在多个defs中定义具有相同id的元素并对其进行引用.
第二个SVG use将在第一个SVG defs部分中选择定义，并忽略本地重定义.
I have multiple SVG pictures embedded into single HTML page.
Every SVG has own defs section that I am referencing to in my use elements.
It looks like I can't define element with the same id inside multiple defs and reference to it.
Second SVG use will pick the definition form the first SVG defs section, and ignore the local redefinition.
有人知道我如何引用LOCAL defs部分吗?
Does anybody know how I can reference to the LOCAL defs section?
Chrome和Firefox中的情况相同.
The same story in Chrome and Firefox.
-
请参见以下示例:
See the example below:
<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>
推荐答案
每个您的选项是使所有ID唯一，或者将SVG移到单独的文件中，然后通过<object>或<iframe>标记对其进行引用.
Your options are either make all the IDs unique or move the SVG into separate files and reference them via <object> or <iframe> tags.
这篇关于如何“使用"本地"defs"在SVG中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
