Почему мой SVG загружается через JavaScript пустым?

Question

Я пытаюсь загрузить SVG через JavaScript. Все, что я получаю, это пустой экран, если я проверяю его, я вижу код, но svg не рендерится. Если вы вставите ссылку в браузер, вы можете увидеть изображение. Любая помощь приветствуется.

Спасибо

var ajax = new XMLHttpRequest();
  ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
  ajax.send();
  ajax.onload = function(e) {
    var div = document.getElementById("svgContainer");
    div.innerHTML = ajax.responseText;
  
  }

<div id="svgContainer"></div>

Answer 1

Как сказал enxaneta в комментарии div.innerHTML =ajax.responseText.replace(/ns0:/g,"") решает проблему следующим образом;

var ajax = new XMLHttpRequest();
  ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
  ajax.send();
  ajax.onload = function(e) {
    var div = document.getElementById("svgContainer");
    div.innerHTML = ajax.responseText.replace(/ns0:/g,"");
  
  }

<div id="svgContainer"></div>

Answer 2

Эта проблема, похоже, не связана с вызовом Ajax. Ваш код работает с другим URL-адресом изображения .

Проблема, похоже, связана с рассматриваемой SVG. Включение через тег img отлично работает. Непосредственное включение разметки SVG в HTML показывает ту же проблему, что и вы.

Chrome и Firefox отображают большое окно просмотра, но не отображают содержимое изображения.

Рассматриваемый SVG ставит перед всеми тегами SVG префикс пространства имен ns0. Как предложил комментатор, удаление этого префикса из всех тегов прошло успешно - Chrome и Firefox отображают изображение.

Однако простая предложенная замена текста является слабым решением: если префикс изменится (это произвольная строка, заданная создателем SVG), изображение снова не будет отображаться. Кроме того, замена текста может удалить вхождения ns0 в источнике изображения, которые не являются префиксом пространства имен, что может привести к повреждению изображения или изменению его содержимого.

Хотя я не смог найти ответ на канонический способ вставки файлов SVG такого типа, я бы порекомендовал использовать тег изображения и указать в качестве источника URL.

<img id="svgContainer">

var img = document.getElementById("svgContainer");
img.src = "https://example.com/image.svg";

Answer 3

Проверьте ваш CSS-файл на предмет идентификатора svgContainer, независимо от того, какой стиль вы указали или нет.Ваша проблема более или менее похожа на проблему стилей.

Проблема в том, что вам необходимо сначала импортировать документ, т.е. responseXML находится в другом документе DOM.Для вставки в ваш документ вам нужно использовать document.importNode

. Для получения дополнительной информации вы можете следовать этому ответу .

var ajax = new XMLHttpRequest();
        ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
        ajax.onload = function() {
            var svg = ajax.responseXML.documentElement;
            var div = document.getElementById("svgContainer");
            svg = document.importNode(svg, true); // tried and tested in Chrome only . Need to check for other browsers
            div.appendChild(svg);
        };
        ajax.send();

.