如何将SVG转换为可保存在后端的JSON，然后再次调用JSON并将其转换为SVG

Question

当我在开发工具时，操场上有很多svg，因此dom变得很重，喜欢将svg保存在后端，并且在需要时我需要将其放到操场上。 ...... 任何人都可以找到解决方案...........

例如，我正在提供SVG

<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg

Answer 1

给SVG一个ID：

<svg id="svgID" width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg>

请记住，没有元素可以具有相同的ID

将SVG转换为JSON字符串

然后使用JavaScript创建JSON字符串

//Get the SVG
var svg = document.getElementById("svgID");

//Creates a temporary div and append the SVG to it, this is not visible to the user
var tempDiv = document.createElement("div");
tempDiv.appendChild(svg);

//Gets the svg as a string
var svgText = tempDiv.innerHTML;

//Create the JSON string
var jsonString = JSON.stringify(svgText);

您将获得一个类似于以下内容的字符串：

再次将其转换回

//Get the svgString from JSON
svgText = JSON.parse(jsonString);

//Creates a SVG Node from the string
tempDiv.innerHTML = svgText

//Puts the SVG into the element with the id "playgroundID"
document.getElementById("playgroundID").append(tempDiv.firstChild);