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

Question

我的目标是在 JavaScript 中加载 SVG 图像，并将其同时作为 image 和底层 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

上测试

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

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

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

javascript

jquery

xml

svg