1

У меня есть json файл.
Декодировав его я получил блок div. Есть ли возможность конвертировать полученный блок в SVG?

В данном div лежит логотип созданный с помощью html который стоило бы перенести в svg формат.
Результат декодинга json: https://i.stack.imgur.com/5D5ZT.jpg

Сам 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":""}]}]}
12
  • 1
    а почему бы сразу не построить по json svg? 15 апр 2019 в 9:55
  • Типо декодировать его сразу как svg, а не как html?
    – Data Nerd
    15 апр 2019 в 9:58
  • так точно, и если Вы бы добавили что-то конкретное в вопрос, было бы легче сказать 15 апр 2019 в 9:59
  • Если честно, никогда не конвертил json в svg, не знаю как. По поводу конкретики, то у меня просто кроме json'а ничего нет, могу его кинуть, но нз или это поможет))
    – Data Nerd
    15 апр 2019 в 10:16
  • 1
    ассоциация:stackoverflow.com/q/55677328/7394871 21 апр 2019 в 4:46

1 ответ 1

1

Пожалуйста, попробуйте следующее. Сообщите мне, это то, что вам нужно?
Я поместил ваш JSON в svg.json в ту же папку, что и index.html

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>

Источник ответа:@enxaneta

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.