canvg()问题重叠tspan

时间:2017-07-10 14:24:52

标签: javascript angularjs canvg tspan

我需要将svg元素转换为png。    转换为png时,文本会重叠并且无法正确对齐。

实际图片如下:     enter image description here

转换后的图片如下:

enter image description here

代码是这样的:

//这段代码属于svg元素

<text class="foreignObject" text-anchor="middle" x="43.37111015014165" dy="0" width="85.7422203002833" clip-path="url(#area_clip392N6)" y="1em" iname="0" style="fill: rgb(255, 255, 255);">
<tspan x="43.37111015014165" y="1em" dy="0em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="1.1em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="2.2em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="3.3000000000000003em">from backend -</tspan>
<tspan x="43.37111015014165" y="1em" dy="4.4em">data for area map</tspan>
<tspan x="43.37111015014165" y="1em" dy="5.5em">from backend</tspan>
</text>

// --------------------------------------------- -------------------------------------------------- --------------------------------

//这是我用来将svg转换为png的代码:

 var c = document.createElement('canvas');
     c.width = item.clientWidth;
     c.height = item.clientHeight;
     canvg(c, angular.element(item).find("svg").parent().html());
    imgData['url'] = c.toDataURL('image/png');

1 个答案:

答案 0 :(得分:0)

我之前没有更新过canvg.js文件。现在我已经更新了,它运行正常。