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

在 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 在我的网页上始终是全局唯一的？

不，id 值必须是在页面上唯一的 https://www.w3.org/TR/html5/dom.html#the-id-attribute.

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