javascript - 如何使用 JavaScript 将 SVG 图像转换为 SVG 代码以获取多边形或路径？

Question

我有兴趣知道是否可以选择一个 SVG 文件，比如使用 JavaScript/jQuery 在您的 html 文件中选择 example.svg，并将多边形/polypath/path 作为字符串获取以进行进一步操作，而无需将图像保存到桌面并使用 InkScape/Adobe Illustrator 或任何其他矢量处理程序手动提取代码。

这是我的目标：

前

<img src="example.svg" />

后

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,....." style="......"/>
</svg>

以及我希望使用的代码：

$(document).ready(function() {

    // convert the svg into polygon, for instance
    function convertSVG(svg){
        ...
    }

    convertSVG(/* get that SVG in img tags */);

})

Answer 1

使用 jQuery，看起来你可以做类似的事情

$.get("/path/to/file.svg", function(data) {
    var svg_data = data.childNodes;
});

然后, svg_data, 将以 DOM 节点格式保存 SVG 数据的标签，因此您可以执行以下操作：

$("#my_holder").html(svg_data);

然后#my_holder会有图像在里面。