将生成的带有 svg.js 的 SVG 保存为 .svg 文件

Question

我正在尝试将使用 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' });

Answer 1

在 http://svgjs.dev there is a searchbar where you can just search for export and you will find what you are looking for 上：

Exporting the full generated SVG, or a part of it, can be done with the svg() method:

draw.svg()

Exporting works on individual elements as well:

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

现在您已经生成了一个包含您的 svg 的字符串。要将此字符串下载为文件（创建文件），快速 google 搜索可为您提供一个不错的 solution:

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")

将生成的带有 svg.js 的 SVG 保存为 .svg 文件

Save generated SVG with svg.js as .svg file

html

javascript

svg

svg.js