使用JavaScript从DOM元素保存SVG文件

Question

我们正在使用Snap.svg框架在我们的产品网页上绘制SVG文件，该文件工作正常，但现在我们有一个客户端要求提供一个选项/按钮，允许用户将SVG文件保存在他们的系统上。

网页上的SVG元素html代码，

<div class="explain-container"><svg height="200" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Snap</desc><defs></defs><g><rect x="0" y="0" width="140" height="190" rx="5" ry="5" fill="#ffffff" style=""></rect><g><image xlink:href="/misc/static/explain/img/ex_result.svg" preserveAspectRatio="none" x="50" y="50" width="50" height="50"></image><text x="80" y="120" style="font-size: 15px; text-anchor: middle;"><tspan>Result</tspan></text></g></g></svg></div>

这是我为保存svg文件而编写的代码，

savePlanBtn.on('click', () => {
  // Write save svg file logic here
  debugger // eslint-disable-line
  let svgEl = $('svg').get(0);
  svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  svgEl.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
  let name = 'Model_' + Date.now() + '.svg';
  let svgData = svgEl.outerHTML;
  let preface = '<?xml version="1.0" standalone="yes"?>\r\n';
  let svgBlob = new Blob(
    [preface, svgData], {type:'image/svg+xml;charset=utf-8'}
  );
  let svgUrl = URL.createObjectURL(svgBlob);
  let downloadLink = document.createElement('a');
  downloadLink.href = svgUrl;
  downloadLink.download = name;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
});

现在问题是上面的代码保存了SVG文件，但SVG文件是空的，只包含文本，当我在Chrome中打开它时，我在控制台上看到错误。

请参考截图。请让我知道我缺少哪些代码来解决给定的问题。