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

Question

我有兴趣知道是否可以使用 JavaScript/jQuery 在 html 文件中选择 SVG 文件(例如 example.svg)，并以字符串形式获取多边形/多路径/路径以进行进一步操作无需将图像保存到桌面并使用 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 中就会包含图像。