我正在使用canvg.js使用cavas toDataUrl（）将svg元素导出到png图像，但是生成的图像不正确
我阅读了另一篇相关的文章，他们说canvg解析文本节点时出错，但是它也没有显示图例的矩形。
初始svg图片为
生成的base64图像是
svg元素是
<g transform="translate(3,3)">
<g transform="translate(418.9943664965987,0)">
<g clip-path="url(#nx)">
<clipPath id="nx">
<rect x="5" y="5" width="273.359375" height="235"></rect>
</clipPath>
<g transform="translate(5,5)">
<g>
<rect cursor="pointer" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g>
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(31,119,180)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(31,119,180)" stroke="rgb(31,119,180)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="20" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,20)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(255,127,14)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(255,127,14)" stroke="rgb(255,127,14)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="40" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,40)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(44,160,44)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(44,160,44)" stroke="rgb(44,160,44)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Classic Cars, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="60" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,60)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(214,39,40)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(214,39,40)" stroke="rgb(214,39,40)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Classic Cars, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="80" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,80)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(148,103,189)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(148,103,189)" stroke="rgb(148,103,189)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Motorcycles, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="100" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,100)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(140,86,75)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(140,86,75)" stroke="rgb(140,86,75)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Motorcycles, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="120" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,120)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(227,119,194)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(227,119,194)" stroke="rgb(227,119,194)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Planes, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="140" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,140)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(127,127,127)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(127,127,127)" stroke="rgb(127,127,127)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Planes, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="160" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,160)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(188,189,34)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(188,189,34)" stroke="rgb(188,189,34)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Ships, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="180" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,180)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(23,190,207)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(23,190,207)" stroke="rgb(23,190,207)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Ships, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="200" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,200)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(31,119,180)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(31,119,180)" stroke="rgb(31,119,180)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Trains, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="220" width="122.40625" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,220)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(255,127,14)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(255,127,14)" stroke="rgb(255,127,14)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Trains, Sales
</text>
</g>
</g>
</g>
<g transform="translate(127.40625,0)">
<rect cursor="pointer" width="145.953125" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g>
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(44,160,44)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(44,160,44)" stroke="rgb(44,160,44)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Trucks and Buses, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="20" width="145.953125" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,20)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(214,39,40)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(214,39,40)" stroke="rgb(214,39,40)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Trucks and Buses, Sales
</text>
</g>
</g>
<rect cursor="pointer" y="40" width="145.953125" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,40)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(148,103,189)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(148,103,189)" stroke="rgb(148,103,189)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Vintage Cars, Quantity
</text>
</g>
</g>
<rect cursor="pointer" y="60" width="145.953125" height="15" fill="rgb(200,200,200)"
fill-opacity="0.0001"></rect>
<g transform="translate(0,60)">
<g>
<g>
<line shape-rendering="crispEdges" cursor="pointer" x1="0" y1="7.5" x2="15"
y2="7.5" stroke="rgb(140,86,75)" stroke-width="1"></line>
</g>
<g>
<path cursor="pointer" fill="rgb(140,86,75)" stroke="rgb(140,86,75)"
transform="translate(7.5,7.5)"
d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z"></path>
</g>
</g>
<g>
<text pointer-events="none" x="2" dy=".35em" transform="translate(15,7.5)"
fill="rgb(0,0,0)">Vintage Cars, Sales
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
如您所见，图例部分不正确。请帮我。谢谢。
答案 0 :(得分：0)
使用最新版本的canvg可以解决此问题。最好的问候。