【发布时间】：2019-06-24 21:00:40
【问题描述】：
我正在使用 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>如您所见，图例部分不行。请帮我。谢谢。
【问题讨论】：
标签： javascript svg png canvg