1

我正在使用canvg将div中存在的svg转换为画布（到目前为止它工作正常），然后将div的innerHTML复制到另一个div，但它不起作用。画布即将到来，但该画布中不会出现任何内容。提前致谢

<div id="k">
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
</div>
<div id="kk">
<p>Watch me</p>
</div>

var svgTag = document.querySelectorAll('#k svg');    
    svgTag = svgTag[0];
    var c = document.createElement('canvas');
    c.width = svgTag.clientWidth;
    c.height = svgTag.clientHeight;
    svgTag.parentNode.insertBefore(c, svgTag);
    svgTag.parentNode.removeChild(svgTag);
    var div = document.createElement('div');
    div.appendChild(svgTag);
    canvg(c, div.innerHTML);

    setTimeout(function(){
        var data = $("#k").html();
      $("#kk").append($(''+data+''));
    },5000);

JSFiddle

4

1 回答 1

1

画布元素的内容以二进制数据的形式保存，很像图像元素的内容。画布元素没有innerHTML可用于重新创建画布的文本属性。

以下示例显示了使用标准画布 2D 方法克隆画布元素的方法：

function canvasClone(c1) {
    var c2 = document.createElement('canvas');
    c2.width=c1.width;
    c2.height=c1.height;
    c2.getContext("2d").drawImage(c1, 0,0);
    return c2;
}

您可以通过在小提琴中包含该函数并将超时处理更改为：

setTimeout(function(){
  kk.appendChild(canvasClone(c));
},5000);

如果您愿意，请随意在 JQuery 中重写超时代码。

于 2017-10-04T08:24:49.080 回答