文章/答案/技术大牛

发布

社区首页 >问答首页 >使用html2canvas时不显示SVG

问使用html2canvas时不显示SVG
EN

Stack Overflow用户

提问于 2015-09-09 13:35:09

回答 3查看 24.9K关注 0票数 15

我正在做一个项目，我需要在客户端生成一个pdf文件(点击saveFile作为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文件呢？如何将这些文件转换为画布?有人能用代码示例向我展示吗？任何帮助都将不胜感激。

svg

html2canvas

canvg

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-12-03 17:41:55

正如在其他答案中已经说过的:最新的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;
});

编辑:基于注释的附加高度

票数 32

Stack Overflow用户

发布于 2017-08-31 10:03:20

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

票数 5

Stack Overflow用户

发布于 2016-08-28 09:41:57

尝试从以下链接下载最新版本的html2canvas

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

目前的版本是0.5.0-alpha 1

我试过了，而且对我有用。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32481054

复制

相似问题

问使用html2canvas时不显示SVG
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html2canvas时不显示SVGEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html2canvas时不显示SVG
EN