我需要帮助将json转换为svg。我有文件json，我必须解码它，然后我将有div容器，然后我需要将结果转换为svg。我没有任何想法怎么做，请帮助我谁谁））））非常感谢））最好是JavaScript）
JSON：
{"pages":
[
{"id":"page1","class":"art active","type":"box","objHtml":
{"width":"380px","width_page":380,"height":"380px","left":"770px","fon_color":"transparent"},
"boxes":[{"id":"box1","type":"style","objHtml":{},"insideBox":"","loaded":false,"fix":false,"gClass":""},
{"id":"box2","type":"figure","objHtml":
{"zIndex":"2","height":"160px","top":"60px","left":"110px","fon_color":"transparent","border_width":0,"width":"160px","width_page":160,"svg_fon":"#f44336","svg_border_width":"0","svg_border_color":"#000000","svg_gradient":false,"svg_image":false},
"insideBox":"<!--?xml version=\"1.0\" encoding=\"utf-8\"?-->\n<!-- Round -->\n<svg viewBox=\"0 0 200 200\" xmlns=\"https://www.w3.org/2000/svg\" xmlns:svg=\"https://www.w3.org/2000/svg\" width=\"160\"><defs></defs>\n\t\t<g stroke=\"#000000\" stroke-width=\"0\" fill=\"#f44336\">\n\t\t\t<circle cx=\"100\" cy=\"100\" r=\"94\"></circle>\n\t\t</g>\n</svg>\n","loaded":false,"fix":false,"gClass":""},
{"id":"box3","type":"line","objHtml":{"line_width":6,"line_color":"#000000","line_style":"solid","zIndex":"7","height":"auto","top":"110px","left":"-53px","rotate":15,"width":"285px","width_page":285},"insideBox":"<hr style=\"border-top: 6px solid rgb(0, 0, 0); margin: 0px; height: 0px;\">","loaded":false,"fix":false,"gClass":""},
{"id":"box4","type":"line","objHtml":{"line_width":6,"line_color":"#000000","line_style":"solid","zIndex":"1","height":"auto","width":"342px","width_page":342,"top":"75px","left":"-44px","rotate":20},"insideBox":"<hr style=\"border-top: 6px solid rgb(0, 0, 0); margin: 0px; height: 0px;\">","loaded":false,"fix":false,"gClass":""},
{"id":"box5","type":"text","objHtml":{"zIndex":"8","height":"auto","width":"360px","width_page":360,"top":"200px","left":"10px","letterSpacing":"7px"},"insideBox":"<p style=\"text-align: center;\"><span style=\"font-size: 100px; font-weight: 600; color: rgb(33, 33, 33); font-family: \"Didact Gothic\";\">СУШИ</span></p>","loaded":false,"fix":false,"gClass":""},
{"id":"box6","type":"text","objHtml":{"zIndex":"9","height":"auto","width":"360px","width_page":360,"top":"310px","left":"10px"},"insideBox":"<p style=\"text-align: center;\"><span style=\"font-family: \"Didact Gothic\";\">Ресторан японской и паназиатской кухни</span></p>","loaded":false,"fix":false,"gClass":""}]}]}
请尝试以下方法。让mi知道这是否是你需要的。
我把你的JSON放在svg.json和index.html相同的文件夹里
<!doctype html>
<html>
<body>
<!--a div were to put the SVG-->
<div id="svgWrap"></div>
<script>
// a function to load the json
function loadJSON(URL, callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET',URL, true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
// call the loadJSON
loadJSON('svg.json', useJSON);
function useJSON(response){
//you have the json, use it!
let json = JSON.parse(response);
//put the svg inside the divWrap
svgWrap.innerHTML = json.pages[0].boxes[1].insideBox;
}
</script>
</body>
</html>