dom - 是否可以在网页中使用 SVG 元素来限定 url(#id) 属性的范围？

Question

在 SVG 中，您可以使用 URL 引用，例如 url(#id) , 指向网页上的其他 SVG 元素。例如:

<use filter="url(#my-filter)" ...></use>

但是假设，偶然地，我最终会遇到这样的命名冲突:

<svg>
  <defs>
    <filter id="my-filter" x="30">
  </defs>
  <use filter="url(#my-filter)"></use>
</svg>

<!-- somewhere else on my page --->
<svg>
  <defs>
    <filter id="my-filter" x="40">
  </defs>
  <use filter="url(#my-filter)"></use>
</svg>

不幸的是，似乎这些 url()引用没有作用域。当这个页面显示时，它们都将使用相同的过滤器——大概是匹配选择器 #my-filter 的第一个元素(与位于 <filter> 上下文中的 <svg> 相反)。

是否有某种方法可以添加范围，以便每个引用点都指向预期的位置？或者我是否只需要确保这些 ID 在我的网页上始终是全局唯一的？

Answer 1

不，id 值必须是 unique on a page .

The (id) value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.