Question

在我的文档中有多个内联svg时，我注意到使用<use xlink:href="#id"/>将使用id="id"引用第一个定义的元素，即使在另一个内联svg中定义也是如此。

不知怎的，我假设id / xlink:href范围只是svg，但它似乎是整个文档 - 在考虑它时实际上是有意义的。

示例（第二个svg中的红色方块应为绿色）：

svg {
  border: 1px solid gray;
}

<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>

有没有办法让<use/>元素仅以某种方式引用来自同一<svg>的元素？或者我是否必须创建有效的文档范围唯一ID？

inline-svg元素的范围'id ='x'和<use xlink：href =“＃x”>

0 个答案: