svg - 外部ファイル内の別のシンボルを参照する svg シンボルを取得するにはどうすればよいですか?

Question

外部ファイルのシンボル内のシンボルを参照しようとしていますが、Chrome または Firefox で動作させることができません。

HTMLファイルの先頭で定義されている場合、別のシンボルでシンボルを参照できます。これで問題ありません。

<!-- in the html file -->
<svg width="0" height="0">

  <symbol id="local-circle" viewBox="0 0 100 100" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="50"
      fill="red"
    />
  </symbol>

  <symbol id="local-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="#local-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

しかし、このコードを外部ファイルに入れようとすると、シンボル内のシンボルが表示されません。

<!-- in an external file called test.svg -->
<svg xmlns="http://www.w3.org/2000/svg">

  <!-- This shows up fine in the html file -->
  <symbol id="ext-circle" viewBox="0 0 100 100" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="50"
      fill="red"
    />
  </symbol>

  <!-- But here, the rect shows up, but not the referenced circle -->
  <symbol id="ext-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="#ext-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

ファイル内シンボルが外部シンボルを参照する組み合わせも試しましたが、うまくいきませんでした:

<!-- in the html file -->
<svg width="0" height="0">

  <symbol id="combo-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="test.svg#ext-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

どうすればこれを機能させることができますか？多くのシンボルがあり、それらすべてを html ファイルで定義する必要はありません。