js提取div内部的svg内容能生成svg文件吗

2015-08-11 04:17:46 419 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Foodiegirl_Hui 墨衍会员 · AI 创作全网分发关注 + 加入社区

Mermaid离线画图的隐藏技巧：如何生成完全独立、无需JS的SVG图片文件本文详细介绍了如何将Mermaid图表转换为完全独立、无需JS支持的SVG图片文件，解决离线环境下的使用痛点。通过本地渲染环境搭建、SVG代码提取与保存技巧，以及批量转换与自动化方案，帮助用户实现高效、跨平台的图表应用。特别适合技术文档编写、教学课件制作等场景。阅读详情

图一：

图二：

第一张为操作前的svg文件，第二张图为合并后svg图，请问能用js提取div内部的svg内容能生成svg文件吗
代码如下：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

     <script src="snap.svg.js"></script>

 </head>



<body>

<svg id="svg1" width="100" height="100"></svg>

<svg id="svg2" width="100" height="100"></svg>       

 <input id="button2" type="button" value="绘制" onclick=" huizi()">   

<input id="button" type="button" value="蓝圈圈跑到红圈圈家里蹭饭" onclick="mm()">

</body>

      <script type="text/javascript">

         function huizi() {

          svg1 = Snap("#svg1"), svg2 = Snap("#svg2");

          var c1 = svg1.paper.circle(50, 50, 40).attr({

              fill: "#f00"	// 红色

          });

           c2 = svg2.paper.circle(50, 50, 30).attr({

              fill: "#00f"	// 蓝色

          }); }



          // 事件

          function mm(){

              svg1.append(c2);

              this.value = "蹭饭成功";

          }

  </script>

</html>