javascript - 有没有办法将 JSON 转换为 SVG 对象？

Question

我正在开发一个签名捕获小程序，其中一个要求是将签名存储为 SVG 以供将来使用。我目前正在使用Signature Pad来捕获签名，但它会将其存储为 JSON。无论如何要使用 JSON 生成 SVG 对象，还是我用错了方法？

Answer 1

值得庆幸的是，Signature Pad 以超级可读的方式对 JSON 数据进行编码。因为 SVG 只是一个文本文档，我们可以很容易地以编程方式生成一个给定编码 JSON 签名的 SVG 图像。

作为概念验证，请从 Pad 文档中获取此重新生成的签名。我们只需要从每个对象生成 SVG 路径。查看如何为画布完成的源代码（搜索drawSignature），您可以使用您选择的任何语言制作一个简单的示例。

这是 JavaScript 中的 jsfiddle。

function generate_svg(paths) {
  var svg = '';
  svg += '<svg width="198px" height="55px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';

  for(var i in paths) {
    var path = '';
    path += 'M' + paths[i].mx + ' ' + paths[i].my;   // moveTo
    path += ' L ' + paths[i].lx + ' ' + paths[i].ly; // lineTo
    path += ' Z';                                    // closePath
    svg += '<path d="' + path + '"stroke="blue" stroke-width="2"/>\n';
  }

  svg += '</svg>\n';
  return svg;
}