当svg我的文档中有多个内联时,我注意到即使在另一个内联中定义时,using <use xlink:href="#id"/>也会使用引用第一个已定义的元素。id="id"svg
我以某种方式假设id/ xlink:href范围只是/ 范围,svg但似乎是整个文档-在考虑它时确实有意义。
示例(第二个svg中的红色方块应为绿色):
svg {
border: 1px solid gray;
}Run Code Online (Sandbox Code Playgroud)
<html><head></head><body>
<svg width="50" height="50" viewBox="0 0 50 50">
<defs>
<rect id="foo" width="25" height="25" fill="red" />
</defs>
<use xlink:href="#foo" />
</svg>
<svg width="50" height="50" viewBox="0 0 50 50">
<defs>
<rect id="foo" width="25" height="25" fill="green" />
<rect id="bar" width="25" height="25" fill="blue" />
</defs>
<use xlink:href="#bar" x=25 />
<use xlink:href="#foo" /> <!-- Not green but red! -->
</svg>
</body></html>Run Code Online (Sandbox Code Playgroud)
有没有办法让<use/>元素只引用相同的元素<svg>?还是我必须创建有效的,文档范围内的唯一ID?