具有位置绝对值的html2canvas打印svg失败

【问题标题】：html2canvas print svg with position absolute value fail具有位置绝对值的html2canvas打印svg失败
【发布时间】：2018-01-12 16:05:27
【问题描述】：

请运行下面的代码，可以看到：红线没有打印到画布上。位置绝对值有什么问题？我该如何解决？谢谢。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
      <div id="Screenshot" style="height:200px; width:300px;">
          <p>This is it</p>
          <svg width="138" height="14"  version="1.1" xmlns="http://www.w3.org/2000/svg" >
            <path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#89bcde" style="" stroke-width="1"></path>
            <path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="#89bcde" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
          </svg>
          <svg width="138" height="14" style="position:absolute;left:10px;top:100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" style="" stroke-width="1"></path>
            <path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0"  stroke="red" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
          </svg>
      </div>
      <hr />
      <input type="button" value="test" onclick="TestCV()" />
      <div id="test">

      </div>
      <!--<script src="../src/html2canvas.js"></script>-->
      <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        function TestCV() {
            html2canvas(document.getElementById("Screenshot")).then(function (canvas) {
                document.getElementById("test").appendChild(canvas);
            });
        }
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html css html2canvas


【解决方案1】：

尝试像这样在 svg 之前追加和跨越：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

    <div id="Screenshot" style="height:200px; width:300px;">
        <p>This is it</p>
        <svg style="display:block" width="138" height="14" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#89bcde" style="" stroke-width="1"></path>
            <path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="#89bcde" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
        </svg>
        <svg style="position:absolute;left:10px;top:100px" width="1389" height="14" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" style="" stroke-width="1"></path>
            <path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="red" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
        </svg>
    </div>
    <hr />
    <input type="button" value="test" onclick="TestCV()" />
    <div id="test">
    </div>
    <div id="temporady" >
    </div>
    <!--<script src="../src/html2canvas.js"></script>-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        //==============================================
        function TestCV() {
            AddCss();
            var x = $("#Screenshot")[0];
            html2canvas(x).then(function (canvas) {
                document.getElementById("test").appendChild(canvas);
            });
            setTimeout(function () {
                RemoveCss();
            }, 200);
        }
        function AddCss() {
            var css;
            $("#Screenshot").find("svg").each(function () {
                var style = $(this).attr("style");
                $(this).wrap("<spand style='"+style+"'></spand>");
                $(this).removeAttr("style");
            });
        }
        function RemoveCss() {
            $("#Screenshot").find("svg").each(function () {
                 css = $(this).parent().attr("style");
                 $(this).attr('style', css);
                 $(this).unwrap();
            });
        }
    </script>
</body>
</html>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2012-06-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-29
    • 2015-06-27
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode