Возможно ли подключить динамический 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?