SVG（可缩放矢量图形）是一种基于 XML 的图像格式，它可以通过 JavaScript 动态地生成和操作。在前端开发中，经常需要将 JavaScript 生成的 SVG 导出为文件。本文将介绍如何使用 JavaScript 和第三方库来实现该功能。
使用 canvas 实现导出
将 SVG 导出为文件的一种方法是使用 HTML5 中的 canvas 元素。具体步骤如下：
- 将 SVG 代码插入到 HTML 页面中的一个元素内，例如
<div id="svg-container"></div>。
---- -------------------
---- ---------- - --- -----
----- ------ ------ ---------- ----------- --
------
------- 创建一个
canvas元素，并设置其宽度和高度与 SVG 相同。
----- --- - -------------------------------------- ------ ----- ------ - --------------------------------- ------------ - ------------------------ ------------- - -------------------------
- 获取
canvas的渲染上下文（context），将 SVG 绘制到canvas上。
----- --- - ------------------------ ----- --- - --- -------- ---------- - -- -- - ------------------ -- --- ----- ------- - ------------------------------ -- -- --------- ---- ------- -- ------- - --------------------- - ----------------------------------
- 将
canvas转换为文件（例如 PNG 格式），可以使用canvas.toBlob()或者canvas.toDataURL()方法。
-------------------- -- - ----- --- - -------------------------- -- -- --------- ---- --- ---- --- -- -------------
使用第三方库 canvg 实现导出
如果 SVG 中包含了复杂的样式、滤镜等内容，将其转换为 canvas 可能会存在兼容性和支持性问题。此时可以使用第三方库 canvg 来进行 SVG 的解析和渲染。
- 引入
canvg库。
------- ---------------------------------------------------------------------------
- 创建一个
canvas元素，并使用canvg解析 SVG 代码并渲染到canvas上。
----- --- - ----- ---------- - --- -----
----- ------ ------ ---------- ----------- --
--------
----- ------ - ---------------------------------
------------- ------ 将
canvas转换为文件，与上述方法相同。
-------------------- -- - ----- --- - -------------------------- -- -- --------- ---- --- ---- --- -- -------------
示例代码
下面是一个完整的例子，演示如何将 SVG 导出为 PNG 文件：
---- -------------------
---- ---------- - --- -----
----- ------ ------ ---------- ----------- --
------
------
------- ---------------------- -- ------------
------- ---------------------------------------------------------------------------
--------
----- ------------ - -----------------------------------------
----- --------- - --------------------------------------
----------------------------------- -- -- -
----- --- - ----------------------------------
----- ------ - ---------------------------------
------------ - ------------------------
------------- - -------------------------
----- --- - ------------------------
----- --- - --- --------
---------- - -- -- -
------------------ -- ---
-------------------- -- -
----- --- - --------------------------
----- ---- - ----------------------------
--------- - ----
------------- - ------------
------------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------