Question

我可以创建SVG绘图画布，但是我想将其保存到文件中。我使用的是Django，因此我希望保存路径能够包含{{dir_path}}之类的python变量，并让绘图画布记住显示它（使用相同的dir_path检索svg文件）。

样式

<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

</style>

html

<svg width="500" height="500">
  <rect fill="#fff" width="100%" height="100%"></rect>
</svg>

java脚本

<script src="//d3js.org/d3.v4.min.js"></script>
    <script>

  var line = d3.line()
      .curve(d3.curveBasis);

  var svg = d3.select("svg")
      .call(d3.drag()
          .container(function() { return this; })
          .subject(function() { var p = [d3.event.x, d3.event.y]; return [p, p]; })
          .on("start", dragstarted));

  function dragstarted() {
    var d = d3.event.subject,
        active = svg.append("path").datum(d),
        x0 = d3.event.x,
        y0 = d3.event.y;

    d3.event.on("drag", function() {
      var x1 = d3.event.x,
          y1 = d3.event.y,
          dx = x1 - x0,
          dy = y1 - y0;

      if (dx * dx + dy * dy > 100) d.push([x0 = x1, y0 = y1]);
      else d[d.length - 1] = [x1, y1];
      active.attr("d", line);

    });
  }
  </script>

我认为该解决方案应涉及以下内容，但我对javascript不满意。谢谢您对此的任何指导。

  <button id="generate">Save as SVG</button>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://eligrey.com/demos/FileSaver.js/Blob.js"></script>
  <script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>

如何将javascript绘制的svg保存到文件

0 个答案: