有没有一种方法可以将JSON转换为SVG对象？

Question

我正在开发一个签名捕获小程序，其中一个要求是将签名以SVG格式存储供将来使用。目前我正在使用Signature Pad来捕获签名，但它将签名存储为JSON格式。是否有办法使用JSON生成SVG对象，或者我走了错误的路？

- robertingrum

---

Signature Pad 库包含从 JSON 创建 画布元素 的方法，以及指向生成图像的 库 的链接。它们是否不足够？ - Oliver

不幸的是，我的客户想使用SVG，因为他想能够在当前代码中使用对象，而我发现生成SVG的唯一替代方案需要php。我宁愿避免为我的项目重写php为aspx。 - robertingrum

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;
}

- Oliver