是否可以使用网页中的 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 值在页面上必须是唯一的。

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