我需要能够将 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 …Run Code Online (Sandbox Code Playgroud)