为什么我的 SVG 通过 javascript 加载为空白？

Question

我正在尝试通过 javascript 加载 svg。我得到的只是一个空白屏幕，如果我检查它，我会看到代码，但 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 调用无关。您的代码可以与另一个 image URL 一起使用。

问题似乎出在有问题的 SVG 上。通过img 标签包含它可以正常工作。将 SVG 标记直接包含在 HTML 中会出现与您描述的相同的问题。

Chrome 和 Firefox 都显示大视图框，但不渲染任何图像内容。

所讨论的 SVG 以命名空间前缀 ns0 为所有 SVG 标记添加前缀。正如评论者建议的那样，从所有标签中删除此前缀是成功的 - Chrome 和 Firefox 显示图像。

但是，建议的简单文本替换是一个弱解决方案：如果前缀更改（它是 SVG 创建者设置的任意字符串），图像将再次不显示。此外，文本替换可能会删除图像源中出现的不是命名空间前缀的ns0，这可能会破坏图像或更改其内容。

虽然我找不到内联此类 SVG 文件的规范方法的答案，但我建议使用图像标记并将源设置为 URL。

<img id="svgContainer">

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

Answer 3

检查您的 CSS 文件中是否有 id 'svgContainer' 是否提供了一些样式。 您的问题或多或少似乎是样式问题。

问题是您需要先导入文档，即 responseXML 在另一个 DOM 文档中。 要插入到您的文档中，您需要使用document.importNode

如需了解更多信息，请关注answer。

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();