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

Is it possible to get the XML of an SVG image using JavaScript?

本文关键字：图像 XML SVG 获取 可以使 JavaScript 是否      更新时间：2023-09-26

我的目标是在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'));
    });
});

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

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

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

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

据我所知，svg 一旦加载就会被破坏。因此，我建议，你的方式是唯一可能的。

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

使用 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>

相关文章：