Возможно ли подключить динамический svg-файл на html-страницу с тегом ?

У меня есть svg-картинка, которая подключает другую картинку, используя URL взятый из hash-части собственного адреса:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <script>
    <![CDATA[
    let xmlns = "http://www.w3.org/2000/svg";
    let image = document.createElementNS(xmlns,'image');
    image.setAttribute('href', location.hash.substr(1));
    image.setAttribute('x', "0");
    image.setAttribute('y', "0");
    image.setAttribute('width', "1000");
    image.setAttribute('height', "1000");
    document.documentElement.appendChild(image);
    ]]>
  </script>
</svg>

Если я подключаю этот SVG с помощью тега IFRAME, то все работает как надо, но хочется, чтобы работало и через тег IMG:

<iframe src="test.svg#test.jpeg"></iframe>  <!-- так работает -->


<img src="test.svg#test.jpeg" />            <!-- так не работает -->

Не смотря на то, что ничего не отображается, браузер загружает оба файла и test.svg и test.jpeg и после загрузки элемент IMG даже принимает размер картинки test.jpeg. Но почему-то не хочет отображать кроме прозрачного распора. Что надо сделать с SVG-картинкой, чтобы она могла работать подключаясь тегом IMG?


Ответы (0 шт):