是否可以使用网页中的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值必须是unique on a page。

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