javascript - 是否可以使用 JavaScript 获取 SVG 图像的 XML？

Question

我的目标是在 JavaScript 中加载 SVG 图像，并将其同时作为图像和底层 SVG XML。

我可以像...一样加载图像

var myImage = new Image();
myImage.src = "cat.svg";

现在我有了图像后，我如何访问构成 SVG 图像的底层 XML？

我想到的唯一解决方案是通过 ajax 再次加载它:

$(myImage).one("load", function(){
    $.ajax({
        url :       "cat.svg",
        cache :     true, 
        dataType :  "xml"
    }).fail(function( jqXHR, textStatus, errorThrown ) {
        console.error("Ajax failure loading image.");
    }).done(function( data, textStatus, jqXHR ){
        console.log("Got the image's SVG XML:", $(data).find('svg'));
    });
});

但我觉得可能有更好的方法来做到这一点。

Answer 1

无法从 Image 对象中提取图像源。

您问题中包含的 AJAX 解决方案是获取源代码的唯一途径。

如果您只想加载一次图像，那么也许您可以先使用 AJAX 获取它，然后使用获取的 XML 来呈现图像(例如，将图像添加到文档中作为内联 SVG，或将源设置为 data: or Blob URL )。