在幾個地方定義元素重定義

Question

以下代碼在Chrome（版本55.0.2883.95（64位））和Firefox（50.1.0）中產生兩個不同的結果。基本上Chrome可以讓你在兩個不同的svg中擁有相同的線性漸變標識，但是Firefox不會 - 將只定義一個線性漸變。查看下面的代碼片段。

哪種行爲正確？

<svg id='1'> 
 
    <defs> 
 
    <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1"> 
 
     <stop stop-color="red" offset="0%"></stop> 
 
     <stop stop-color="orange" offset="100%"></stop> 
 
    </linearGradient> 
 
    </defs> 
 
    <rect x="0" y="0" width="100" height="100" fill="url(#linearGradient-1)"></rect> 
 
</svg> 
 

 
<svg id='2'> 
 
    <defs> 
 
    <linearGradient x1="50.0008675%" y1="-42.2278548%" x2="50.0008675%" y2="82.3571634%" id="linearGradient-1"> 
 
     <stop stop-color="blue" offset="0%"></stop> 
 
     <stop stop-color="green" offset="100%"></stop> 
 
    </linearGradient> 
 
    </defs> 
 
    <rect x="0" y="0" width="100" height="100" fill="url(#linearGradient-1)"></rect> 
 
</svg>

鉻：

火狐：

Answer 1

重複id值是非法的，並在瀏覽器的這種情況發生時的行爲是不確定的。所以沒有「正確」的行爲。