在几个地方定义元素重新定义

Question

以下代码在Chrome（版本55.0.2883.95（64位））和Firefox（50.1.0）中产生两种不同的结果。基本上Chrome允许您在两个不同的svgs中具有相同的线性渐变id，但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值是非法的，并且在发生这种情况时浏览器的行为是未定义的。所以没有“正确”的行为。