小编jib*_*abs的帖子

Html 到图像 SVG 导出

我需要能够将 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)

javascript svg

5
推荐指数
1
解决办法
1680
查看次数

标签 统计

javascript ×1

svg ×1