SVG填充问题=“ URL（＃）”

Question

我正在动态创建多个具有相同结构的SVG。

我遇到的问题是我必须按渐变的ID引用渐变，因此，当有多个SVG时，这些ID会碰撞并导致意外的结果。 是否可以通过ID引用其他SVG元素？是否可以将选择范围限制在SVG元素之内？

---

第一部分

在一个简单的示例中，我有两个结构相同的SVG-它们将由某些javascript动态创建。问题：请注意，第二个SVG使用第一个SVG：

<div>
  This is the first SVG, it defines "#Gradient" as red-black.
  <br>
  <svg viewBox="0 0 10 10" width="50" height="50" style="border: 1px solid black;">
    <defs>
      <linearGradient id="Gradient" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="black"/>
      </linearGradient>
    </defs>
    <circle cx="5" cy="5" r="5" fill="url('#Gradient')" />
  </svg>
</div>
    
<div>
  This is the second SVG. It ends up displaying a red-black circle instead of red-green.
  <br>
  <svg viewBox="0 0 10 10" width="50" height="50" style="border: 1px solid black;">
    <defs>
      <linearGradient id="Gradient" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="green"/>
      </linearGradient>
    </defs>
    <circle cx="5" cy="5" r="5" fill="url('#Gradient')" />
  </svg>
</div>

每次创建SVG时，我真的是否需要插入唯一的ID，以便它们都能很好地协同工作？

---

第二部分

现在，假设我实际上要做，希望我的所有SVG使用相同的linearGradient对象。然后让我们清理一下。我们将只定义一次并在所有其他SVG中重用它：

<div>
  Let's define the linearGradient once, and use it later. No need to display this.
  <svg style="display: none;">
    <defs>
      <linearGradient id="Gradient" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="black"/>
      </linearGradient>
    </defs>
  </svg>
</div>

<div>
  Ok, let's use the linearGradient defined above. This won't work unless the above is visible -- why?
  <svg viewBox="0 0 10 10" width="50" height="50" style="border: 1px solid black;">
    <circle cx="5" cy="5" r="5" fill="url('#Gradient')" />
  </svg>
  <svg viewBox="0 0 10 10" width="50" height="50" style="border: 1px solid black;">
    <circle cx="5" cy="5" r="5" fill="url('#Gradient')" />
  </svg>
</div>

这不适用于我（Chrome），显然是因为已定义的SVG位于带有"display: none;"的div中。因此，在引用其他SVG元素时，必须将它们“可见”才能使用。做到这一点的最佳方法是什么-我应该将定义的SVG移出屏幕吗？