Question

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

<!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>

Answer 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>

html2canvas打印svg，其位置绝对值失败

1 个答案: