是否可以使用網頁中的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中唯一，並且必須至少包含一個字符。該值不能包含任何空格字符。