是否可以使用网页中的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。

  

（id）值在元素的主子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。