Question

我目前正在开发一个网页，用户可以根据自己的喜好来操纵世界地图的SVG文件。例如。用户可以选择所有欧洲国家/地区，突出显示某些国家/地区，然后下载结果文件。

我了解您可以加入这样的下载链接：

<a href="/path/to/file.svg" download>

现在我还没有将修改后的SVG存储在任何地方，如何让用户下载修改后的SVG版本？

我将SVG内联存储，以便可以直接从javascript文件操纵其属性。

我查看了cropper.js，但这仅适用于canvas和img对象。

Answer 1

由于您用jquery标记了这个问题，所以我猜您也在使用它。然后，有一种非常简单的方式将内联svg（是否修改）下载为.svg文件。

这里有一些嵌入式SVG（再次修改或未修改），您可以通过单击链接下载。

$(document).ready(function() {
   $('#download').attr('href', 'data:application/octet-stream;base64,' + btoa($("#circle").html())); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="download" download="file-name-here.svg">Download</a>

<div id="circle"><svg width="100" height="100" id="visualization" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg></div>

让用户下载操纵的SVG

1 个答案: