使用html-to-image导出Div为SVG时路径错误的问题求助

使用html-to-image库将Div内容导出为SVG文件时，生成的SVG格式不正确，无法作为有效SVG文件使用。测试代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <!-- 1. 构建目标Div -->
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <!-- 2. 使用html-to-image将Div转为SVG -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
      <script type="text/javascript">
        
      function filter (node) {
        return (node.tagName !== 'i');
      }

      htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
        .then(function (dataUrl) {
          // 弹窗显示生成的内容，但SVG路径格式错误
          alert(dataUrl);
        });
      </script>
  </body>
</html>

html-to-image.toSvg()返回的是data URL格式（前缀为data:image/svg+xml;base64,或data:image/svg+xml,），并非直接的SVG源代码。需要先解析提取其中的SVG内容，再处理成可正常使用的SVG文件。

具体处理步骤：

• 移除data URL的前缀部分
• 对base64编码的内容进行解码（如果是base64格式）
• 将解码后的纯SVG文本生成可下载的文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
    <script type="text/javascript">
      function filter (node) {
        return (node.tagName !== 'i');
      }

      htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
        .then(function (dataUrl) {
          // 解析data URL，提取SVG内容
          let svgContent;
          if (dataUrl.startsWith('data:image/svg+xml;base64,')) {
            // 解码base64格式内容
            const base64Part = dataUrl.split(';base64,')[1];
            svgContent = decodeURIComponent(atob(base64Part));
          } else if (dataUrl.startsWith('data:image/svg+xml,')) {
            // 解码URI编码的内容
            svgContent = decodeURIComponent(dataUrl.split(',')[1]);
          }

          // 创建并下载有效SVG文件
          const blob = new Blob([svgContent], { type: 'image/svg+xml' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'exported.svg';
          a.click();
          URL.revokeObjectURL(url);
        });
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者jiblylabs