canvas（）は重複するtspanで問題を解決します

Question

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'); 

Answer 1

私が更新したbefore.Now私はcanvg.jsファイルを更新していない、それが正常に動作しています。