我需要能够将 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>
小智 1
从 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
});