是否可以在网页中使用 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匹配的元素(而不是位于每个<svg>上下文中的<filter>(。

有没有办法添加范围，以便每个引用都指向预期位置？还是我只需要确保这些 ID 在我的网页上始终是全局唯一的？

Answer 1

不可以，id 值在页面上必须是唯一的。

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