svg标签内容导出为svg文件问题

 原本的代码：

// 大概代码层级

// html代码
<div ref="svgContainer"><div>

// js 代码
// 1、div中添加svg
const svg = d3.select(svgContainer.value)
  .append("svg)
  .attr("id", svgElement")
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .attr("xmlns:xlink", "http:/ /www.w3.org/1999/xlink")
//2、svg中添加g
const svg_g = svg.append("g")
//3、添加.svg图片
const svgImageCode = '<svg id='图层1' data-name='' xmlns='http://www.w3.org/2000/svg'  viewBox='' .........'
svg_g.append('image')
  .attr('width', 100)
  .attr('x', 100)
  .attr('y', 100)
  .attr("xlink:href", 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgImageCode ) // 此处xlink:href对应的值之前是用的svg图片的相对路径，实际导出的时候导不出来，将 .svg 图片的代码作为字符串嵌入到添加的 image 元素中就可以一起导出了

 

增加的导出代码：

// 点击按钮时导出页面中的 SVG 元素为 .svg 文件
document.getElementById("exportSvgButton").onclick = function() { 
    const svgElement = document.getElementById("svgElement"); // 替换为实际的 SVG 元素 ID
    const svgContent = new XMLSerializer().serializeToString(svgElement);

    const blob = new Blob([svgContent], { type: "image/svg+xml" });
    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = "diagram.svg"; // 设置导出的文件名为 "diagram.svg"
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url); // 释放对象URL资源
};