Изображения во вложенных <defs>не отображаются в хром

Question

У меня есть несколько файлов SVG, в которых один включает другой, используя элементы <use />.Чтобы объединить все эти файлы в один результирующий, я написал код, который преобразует ./main.svg снизу:

#file: ./svg/shared.svg
<svg>
  <image xlink:href="../img/bg.png" id="bg" />
</svg>

#file: ./svg/index.svg
<svg id="index">
  <use xlink:href="./shared.svg#bg" />
</svg>

#file: ./main.svg
<svg>
  <use xlink:href="./svg/index.svg#index" />
</svg>

в:

<svg>
  <defs>
    <svg id="svg-index">
      <defs>
        <image xlink:href="./img/bg.png" id="img-bg" />
      </defs>
      <use xlink:href="#img-bg" />
    </svg>
  </defs>
  <use xlink:href="#svg-index" />
</svg>

Таким образом, в основном все URL и идентификаторыразрешенные и ссылочные узлы импортируются.Скрипт работает отлично, в Firefox, а результат работает также и в Inkscape. НО в хроме изображения не отображаются.Они загружены, что я вижу на вкладке сети.

Если я изменю xlink:href (панель инспектора) изображений, добавив немного #qwertz в конце одного изображения , все они появятся, так что швы будутсвязанные с браузером, так как результат работает в FF и Inkscape.

Есть идеи, как это исправить?

ОБНОВЛЕНИЕ

Одна вещь, которая может иметь некоторыеэффект здесь в том, вставлен ли манипулируемый SVG в дом или нет.Таким образом, этот код заставляет изображения появляться:

setTimeout(function () {
  [...document.querySelectorAll('image')].forEach(
      img => img.setAttribute('xlink:href',
                img.getAttribute('xlink:href')
    )
  );

}, 0)

Но это выглядит по-настоящему хакерски, и я действительно заинтересован в "более чистом" решении здесь ...