我需要能够将div中的所有内容导出为可导出的SVG文件。我使用html-to-image库来做到这一点。我遇到的问题是生成的SVG路径不正确，不能作为SVG文件工作。尝试了一些东西，但我卡住了。下面是您可以运行以测试它的完整代码。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<!-- 1. Constructing a Div -->
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<!-- 2. Using HTML-to-Image to convert that Div to 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) {
//--3. the following Alert shows the generated SVG file for reference, but the SVG path generated is wrong
alert(dataUrl);
});
</script>
</body>
</html>
从html-to-image返回的dataUrl是url编码的。所以，你需要解码，也需要提交第一个mimie类型字符串，它是逗号,之前的部分。在本例中，我使用,拆分数据字符串并解码svg字符串。
<div id="svg">
</div>
htmlToImage.toSvg(document.getElementById('capture'), { filter: filter
})
.then(function (dataUrl) {
let svg = decodeURIComponent(dataUrl.split(',')[1])
console.log(svg);
document.getElementById('svg').innerHTML = svg
});