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

My goal is to load an SVG image in JavaScript and have it both as an image and the underlying SVG XML.

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

I can load the image like...

我可以加载像...

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

Now after I have the image, how can I access the underlying XML that makes up the SVG image?

现在有了图像后,如何访问组成SVG图像的基础XML?

The only solution I've come up with is to load it again via ajax:

我想出的唯一解决方案是通过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'));
    });
});

But I feel like there might be a better way to do this.

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

3 个解决方案

#1

There is no way to extract the image source from the Image object.

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

The AJAX solution included in your question is the only way to obtain the source.

您的问题中包含的AJAX解决方案是获取源的唯一方法。

If you want to only load the image once, then perhaps you could fetch it first using AJAX, and then use the fetched XML to render the image (e.g. adding to the document as inline SVG, or setting the source to a data: or Blob URL).

如果您只想加载一次图像,那么也许您可以先使用AJAX获取它,然后使用获取的XML渲染图像(例如,将文档添加为内联SVG,或将源设置为数据:或Blob URL)。

#2

As i know the svg will be impreted as soon as it get loaded. Therefore i would suggest, that your way is quite the only possible left.

据我所知,svg一加载就会受到影响。因此,我建议,你的方式是唯一可能的左派。

All libs i know (snap.svg, svg.js, etc.) work only with the interpreted code of an svg. Even if it would boost performance on some degrees they relie on manipulating the interpreted code ... so i would guess there is no way to get the raw code out of an interpreted svg.

我知道的所有库(snap.svg,svg.js等)只能使用svg的解释代码。即使它会在一定程度上提高性能,他们也会依赖于操纵解释的代码...所以我猜想没有办法从解释的svg中获取原始代码。

#3

Use jQuery, Tested on chrome and firefox

使用jQuery,在chrome和firefox上测试

$('#svgBase').html( '<circle cx="20" cy="20" r="10" stroke="black" stroke-width="2" fill="red"></circle> <circle cx="50" cy="20" r="10" stroke="black" stroke-width="2" fill="green"></circle>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<svg id="svgBase"></svg>

#1