将SVG复制到画布后的神秘增长 [英] Mysterious growth after copying a SVG to a canvas

问题描述

我的页面上有一个svg我需要导出到png，所以按照建议这里，我正在使用canvg。

I have a svg on my page that I need to export to a png, so following the advice here, I'm using canvg.

该副本似乎首先工作正常，但后来画布身高开始神秘地增加。

The copy seems to work fine at first but then the canvases height starts mysteriously increasing.

我做错了什么？我已经尝试为画布设置各种尺寸而没有运气。在IE和Chrome中失败。

Am I doing something obviously wrong? I've tried setting all kinds of sizes for the canvas with no luck. Fails in IE and Chrome.

这是我的导出功能：

function copytocanvas()
{
    var c = document.getElementById('canvas');
    c.width = $('#svgChart').width();
    c.height = c.width;
    c.getContext = document.getElementById('canvas').getContext;


    var svg = document.getElementById('svgChart'); // or whatever you call it
    var serializer = new XMLSerializer();
    var str = serializer.serializeToString(svg);

    canvg(c, str);  
}

这是一个显示问题的jsfiddle： http://jsfiddle.net/LkqTU/4772/

Here is a jsfiddle to show the problem: http://jsfiddle.net/LkqTU/4772/

滚动时问题似乎变得更糟！

The problem seems to get worse when scrolling!

推荐答案

试试这个：

canvg （c，str，{ignoreMouse：true，ignoreDimensions：true}）;

编辑：

看起来你不需要 ignoreMouse ：

canvg（c，str，{ignoreDimensions：true}）; 应该可以解决问题。

这篇关于将SVG复制到画布后的神秘增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！