内联svg元素的范围id ='x'和<use xlink:href ='#x'/>

Dan*_*ner 6 html svg scope

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?