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:100px;">
          <p>This is it</p>
          <svg style="position:absolute;left:48px;top:-70px; height: 250px; width: 250px;" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" >
              <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
          </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

也许你的圈子走出了可见区域？如果您只有圆圈，请尝试更轻松的事情：

<div id="Screenshot">
    <span>This is it</span>
    <div style="background: #A52A2A; 
                border-radius: 50%;  
                display: inline-block; 
                height: 50px; 
                width: 50px"></div>
</div>

而不是你的变体。

如何使用位置绝对值

1 个答案: