使用html2canvas时，SVG未显示

Question

使用html2canvas时，SVG未显示

17

我正在处理一个项目，其中需要在客户端上生成PDF文件（点击保存为PDF），因为有些数据不应该发送到服务器。我已经了解了这些可用选项; fileSaver.js和html2canvas，但都没有帮助。我还想指出，我不太擅长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？有人能给我展示一下代码样例吗？任何帮助将不胜感激。

- Kennan Obura

要绘制SVG图形，你需要使用"canvg.js"。它将所有的SVG转换为<canvas>元素，请参考canvg.js。 - GeekExplorer

5个回答

7

解决方案1：您可以使用最新版本的html2canvas工具，它支持svg元素。
解决方案2：在调用html2canvas函数之前，您可以将所有现有的svg元素转换为canvas元素，这是html2canvas支持的。您可以使用canvg.js进行此转换。

- Raghavenda Rai K

在StackOverflow上，我们关心高质量的问题和答案。在回答问题之前，请阅读如何编写好答案，以确保您的答案符合Stackoverflow的标准。 - Noel Widmer

虽然这可能是解决问题的有价值的提示，但一个好的答案也应该展示解决方案。请编辑以提供示例代码以说明您的意思。或者，考虑将其编写为评论。 - Toby Speight

3

我正在使用最新版本 v1.0.0-alpha.12，但是我仍然无法呈现 SVG 标签，即使是非常简单的图形也不行。 - AGamePlayer

2

嗯，我确实可以渲染SVG，但只能在指定宽度时渲染svg标签。 - AGamePlayer

1

@AGamePlayer 谢谢！我通过添加“width”解决了这个问题。 - Lucas Moyano Angelini

2

遇到相同的问题。将所有CSS移动到容器元素（div）中，并将CSS（在我的情况下，position:absolute;）应用于容器元素，而不是SVG元素。

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

- mimetyped

0

在我的情况下，我有一个margin-top，它将svg移动到可见区域之外（在html中完美工作）。也许对某些人有帮助...只需将父元素的margin替换为padding即可。

- Mani Afschar Yazdi

-1

请尝试在以下链接上下载最新版本的html2canvas

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

目前它的版本是0.5.0-alpha1

我尝试过它，对我来说很有效。

- jay

我尝试了5.0 alpha 1和v1.0.0-rc.3，但我的SVG文件都是空白的。 - Kyle

@Kyle 我在使用fontawesome图标和版本1.0.0-rc.3时遇到了同样的问题，我为每个SVG添加了style="width: 20px"或者你需要的宽度，这样就解决了。 - Apostolos

@Apostolos 我们需要将样式应用到哪个元素上？SVG？ - Zeeshan Ahmad Khalil

我想是的。虽然有一段时间了 :) 但我想是，在SVG上。 - Apostolos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Isabella Lopes · Accepted Answer

就像其他答案中已经提到的那样：最新版本的html2canvas支持svg元素。

但是显然，CSS没有被应用，并且在设置CSS“width”样式和svg“width”属性时存在错误。

在截图之前，我对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;
});

编辑：根据评论添加了高度