javascript - 根据请求数据动态创建 SVG

Question

我尝试过谷歌搜索，但是 html 中关于 svg 的信息非常困惑。我有一个非常复杂的场景，或者至少对我来说是这样的:

使用 jQuery，我不想根据 GET 请求的响应数据在 div (id="manual-regridding-image") 内动态创建 svg 对象。 svg 将包含图像数据和其他 svg 元素。如果 GET 请求失败，则 div 的全部内容应设置为失败函数内的消息。最后，需要在图像完全下载/加载后做出向用户显示内容的决定。

到目前为止我得到的是:

function load_grid_svg() {

    show_gridimage = true;
    $.get(
        "/api/results/gridding/svg",
        function (data) {
            svg = document.importNode(data, true);
            $("#manual-regridding-image").html(svg);
        }
    ).fail(function() {
        $("#manual-regridding-image").html("<em>Could not find the grid image! Maybe gridding failed last time?</em>");
    }).always(function() {
        if (show_gridimage) {
            $("#manual-regridding-image").show();
        } else {
            $("#manual-regridding-image").hide();
        }
    });
}

但是数据导入不起作用。感觉这个问题以前就应该问过，但我找不到任何适用的内容。

编辑

如果我正确理解回溯，这会在 importNode 行上产生 NotSupportedError:不支持操作。

编辑2

正如评论中的 @Tomalak 所指出的，响应是一个 XMLDocument 并且要让它在 $.get 中正确显示回调应该是:

    function (data) {
        $("#manual-regridding-image").append(data.documentElement);
    }

Answer 1

根本不知道为什么需要 document.importNode。
您只需使用 $.html() 将 svg 的内容添加到文档中即可。

检查这个例子:

svgstr = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'

$('#btn1').click(function() {
  $('#a1').append(svgstr)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">
  <span>Some Text</span><br />
</div>
<button id="btn1">Click to add SVG</button>