将 SVG 复制到画布后的神秘增长答案

【问题标题】：Mysterious growth after copying a SVG to a canvas将 SVG 复制到画布后的神秘增长
【发布时间】：2012-10-13 08:44:57
【问题描述】：

我的页面上有一个 svg，需要导出为 png，因此按照 here 的建议，我正在使用 canvg。

起初副本似乎工作正常，但随后画布高度开始神秘地增加。

我做错了什么吗？我试过为画布设置各种尺寸，但没有运气。在 IE 和 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/

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

【问题讨论】：

看起来 canvg 出于某种原因会在鼠标移动时调整画布大小。 canvg(c, str, {ignoreMouse:true}); 阻止画布不断调整大小，但画布仍然过大。

标签： javascript html svg html5-canvas canvg

【解决方案1】：

试试这个：

canvg(c, str, {ignoreMouse:true, ignoreDimensions:true});

编辑：

看来你不需要ignoreMouse：

canvg(c, str, {ignoreDimensions:true}); 应该可以解决问题。

【讨论】：