时间戳

首页 > 解决方案 > 使用 svg.js 将生成的 SVG 保存为 .svg 文件

javascript - 使用 svg.js 将生成的 SVG 保存为 .svg 文件

问题描述

我正在尝试将使用 svg.js 创建的元素在创建后自动保存为 .svg 文件。该库具有导出 SVG 的svg()方法，但我还没有找到示例来学习如何使用它。例如，如果我想保存我在下面的代码中创建的矩形，我该怎么做？

html:

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>

</body>
</html>

js：

var draw = SVG().addTo('body').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });

标签： javascripthtmlsvgsvg.js

解决方案

在http://svgjs.dev有一个搜索栏，您可以在其中搜索，export然后您会找到您要查找的内容：

可以使用 svg() 方法导出完整生成的 SVG 或其中的一部分：

draw.svg()

导出也适用于单个元素：

var rect = draw.rect()
var svg  = rect.svg()

现在您已经生成了一个包含您的 svg 的字符串。要将这个字符串下载为一个文件（创建一个文件），一个快速的谷歌搜索给你一个很好的解决方案：

function downloadString(text, fileType, fileName) {
  var blob = new Blob([text], { type: fileType });

  var a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}

// downloadString("a,b,c\n1,2,3", "text/csv", "myCSV.csv")

推荐阅读