如何解决svg元素未呈现到图像中的问题(dom2img)

时间:2019-04-22 10:07:37

标签: javascript svg amcharts html2canvas amcharts4

我正在使用amcharts4构建热图,然后通过dom2img将其转换为图像。一切都很好,地图本身已呈现,但dom2img无法捕获图例。图例本身是svg元素。

我想也许它与渐变有关,因为那是渐变的唯一元素。

svg元素:

<g fill-opacity="1" fill="url(&quot;http://localhost:4200/campaigns/pptx/2#gradient-id-257&quot;)" style="pointer-events: none;"><path d="M0,0 L455,0 a0,0 0 0 1 0,0 L455,20 a0,0 0 0 1 -0,0 L0,20 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path></g> 

Dom2img应该呈现图例元素。

1 个答案:

答案 0 :(得分:1)

改为使用amCharts内置导出功能:https://www.amcharts.com/docs/v4/concepts/exporting/

// First enable export
chart.exporting.menu = new am4core.ExportMenu();

chart.exporting.extraSprites.push({
    "sprite": legendContainer,
    "position": "bottom",
    "marginTop": 20
});

// Then you can get the Base64 image
var imgData = chart.exporting.getImage("png");

您还可以使用extraSprites包含图例,如上所示。进一步了解including external legend in export