简介
SVG 是一种矢量图形格式，可以通过代码生成和编辑。D3.js 是一个强大的 JavaScript 库，用于创建动态和交互式数据可视化。在 D3.js 中创建一个 SVG 后，您可能想要将其保存或导出为文件，以便将其用作静态图像或在其他应用程序中使用。
本文将介绍如何在 D3.js 中创建 SVG，并将其保存或导出为文件，以适用于 IE、Safari 和 Chrome 浏览器。
创建 SVG
首先，让我们看一下如何在 D3.js 中创建 SVG。以下是一个简单的例子：
----- --- - ----------------- -------------- -------------- ---- --------------- ---- -------------------- ----------- ---- ----------- ---- ---------- ----
此代码将创建一个 SVG，其中包含一个圆形。请注意，我们使用 d3.select 选择了 body 元素，然后使用 append 在其内部添加了一个 svg 元素，并设置其宽度和高度。接下来，我们使用 svg.append 在 SVG 内部添加了一个圆形，并设置其属性。
导出 SVG
现在，我们已经创建了一个 SVG，接下来让我们看一下如何将其导出为文件。有几种方法可以实现这一点，包括使用第三方库或使用浏览器本身的功能。
方法一：使用 FileSaver.js 库
FileSaver.js 是一个用于在客户端保存文件的库。使用它，您可以将 SVG 保存为 PNG、PDF 等格式。
首先，在 HTML 文件中添加以下两行代码：
------- ----------------------------------------------------------------------------------- ------- -----------------------------------------------------------------------------
然后，在 D3.js 代码中，添加以下代码：
----- --- - ----------------- -------------- -------------- ---- --------------- ---- -------------------- ----------- ---- ----------- ---- ---------- ---- ----- ------- - ----------------------------- ----- --------- - --- ------------------------------------------ ---------------------------------------- ---------- ------------------------------------------------------------ -- -- - ----- ------ - --------------------------------- ------------------ -- ------------ -------------- --
此代码将创建一个 SVG，其中包含一个圆形。接下来，我们将获取 SVG 元素并将其序列化为字符串。然后，我们使用 canvg 将 SVG 渲染到画布中，并在点击按钮时将画布转换为 PNG 并保存为文件。
请注意，这种方法需要引入两个外部库：FileSaver.js 和 canvg。
方法二：使用浏览器内置功能
您还可以使用浏览器的内置功能将 SVG 导出为文件。以下是一个例子：
----- --- - ----------------- -------------- -------------- ---- --------------- ---- -------------------- ----------- ---- ----------- ---- ---------- ---- ----- ------- - ----------------------------- ----- --------- - --- ------------------------------------------ ----- ---- - --- ----------------- ------ ----------------- ----- --- - ------------------------- ----- - - --------------------------- ---------- - ------------ ------ - --- ---------------------------- --------- ----------------------------
此代码将创建一个 SVG，其中包含
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30009