使用 html2canvas 时不显示 SVG

Question

我正在做一个项目，我需要在客户端生成一个 pdf 文件（点击 saveFile as PDF），因为一些数据不会被发送到服务器。我已经阅读了这些可用选项； fileSaver.js 和 html2canvas，以及 none 似乎有帮助。我还想指出，我对 javascript 不是很好。这是我的js代码

<script type="text/javascript">
    $(document).ready(function() {
        $("#saveOutput").click(function() {
            $("#Screenshot").html2canvas({ 
                onrendered: function(canvas) {
                    var png = canvas.toDataURL()
                    window.open(png);
                }
            });
        });
    });
</script>

和我的Html

<div id="Screenshot">
    <p>This is it</p>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" style="height: 250px; width: 250px;">       
          <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
    </svg>
</div>
<div id="content">
    <a class="button" id="saveOutput" href="#">Save as File</a>
</div>

为什么不能显示SVG文件？如何将这些文件转换为 Canvas？有人可以向我展示代码示例吗？任何帮助将不胜感激。

Answer 1

尝试在下面link

下载最新版的html2canvas

https://github.com/niklasvh/html2canvas/releases

目前版本为 0.5.0-alpha1

我试过了，对我有用。

Answer 2

解决方案 1：您可以使用支持 svg 的最新 html2canvas 元素。
解决方案 2 : 在调用 html2canvas 函数之前，您可以转换支持将所有现有的 svg 元素转换为 canvas 元素通过 html2canvas。对于此转换，您可以使用 canvg.js.

Answer 3

就像在其他答案中已经说过的：最新的 html2canvas 支持 svg 元素。

但显然 CSS 未应用，并且在设置 css“宽度”样式和 svg“宽度”属性时存在错误。

在截图前，我对svg元素添加了处理

var svgElements = document.body.querySelectorAll('svg');
svgElements.forEach(function(item) {
    item.setAttribute("width", item.getBoundingClientRect().width);
    item.setAttribute("height", item.getBoundingClientRect().height);
    item.style.width = null;
    item.style.height= null;
});

编辑：根据评论添加高度

Answer 4

遇到了同样的问题。

将所有 CSS 移动到容器元素 (div) 并将 CSS（在我的例子中，position:absolute;）应用到容器元素而不是svg 元素。

正如 Isabella Lopes 正确指出的那样，需要将高度和宽度应用为属性而不是样式。

使用 html2canvas 时不显示 SVG

SVG not displayed when using html2canvas

svg

html2canvas

canvg