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

检查您的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();

Answer 3

此问题似乎与Ajax调用无关。您的代码可与另一个image 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";

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

3 个答案: