使用Javascript将两个SVG元素合并为一个？

假设我有以下html上下文，我无法访问它的创建：

<div id="outer">
  <div id="chart-div">
    <svg id="chart"></svg>
  </div>
  <div id="legend-div">
    <svg id="legend"></svg>
  </div>
</div>

我要做的是使用canvg库将这个SVG导出到一个图像，这里的问题是它们是分开的，所以我得到了两个画布，canvg库接受一个SVG定义字符串作为输入

如何修改上面的html元素，使它们只成为一个SVG？使用Javascript作为浏览器扩展

---

我尝试过将div标签切换到SVG，但它破坏了一切，SVG变为空白

这是我对您问题的解决方案：我让外部div

显示：无

，我正在创建另一个SVG元素（您可以动态地这样做）在

#new

svg中结束我使用的是

#图表

和

#图例

。我希望有帮助

svg{border:1px solid；}
#外部{显示：无}
#外分区{位置：绝对；宽度：500px；}

---

这是一个Javascript解决方案，用于通过DOM操作在文档中合并两个svg可访问性

var svgNS=”http://www.w3.org/2000/svg";  
var outer=document.getElementById（'outer'）；
//获取图表内容
var chart=document.getElementById（'chart-div'）；
var chartSvg=chart.getElementsByTagName（'svg'）[0]；
var chartContent=Array.from（chartSvg.childNodes）；
//获取图例内容
var legend=document.getElementById（'legend-div'）；
var legendSvg=legend.getElementsByTagName（'svg'）[0]；
var legendContent=Array.from（legendSvg.childNodes）；
//创建一个合并的div，我们将在其中合并SVG
var merged=document.createElement（'div'）；
merged.setAttribute（'id'，'merged div'）；
外部追加子项（合并）；
//svg的CreateElements
var mergedSvg=document.createElements（svgNS，'svg'）；
mergedSvg.setAttribute（'id'，'merged'）；
//保留图表的视图框
mergedSvg.setAttribute（'viewBox'，chartSvg.getAttribute（'viewBox'）；
merged.appendChild（mergedSvg）；
//添加两个SVG的内容
for（设i=0；i

请附上svg内容示例。更简单的方法是将两个画布混合到一个图像中