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）。

Answer 2

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

我知道的所有库（snap.svg，svg.js等）仅适用于svg的解释代码。即使它会在某种程度上提高性能，但他们还是会依赖于操纵解释的代码......所以我猜想没有办法从解释的svg中获取原始代码。

Answer 3

使用jQuery，在chrome和firefox上测试

＆＃13;

$('#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>')

＆＃13;

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

＆＃13;

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

3 个答案: