複数の場所で要素の再定義を定義します

Question

次のコードでは、Chrome（バージョン55.0.2883.95（64ビット））とFirefox（50.1.0）の2つの異なる結果が生成されます。基本的にChromeでは、2つの異なるsvgで同じIDの線形グラデーションを使用できますが、Firefoxでは定義されていません。線形グラデーションは1つしか定義されません。下記のコードスニペットを参照してください。

どのような動作が正しいですか？

<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>

クローム：

のFirefox：

Answer 1

重複id値は不正であり、そしてそれが起こるのブラウザの動作は未定義です。したがって、「正しい」動作はありません。