I have the following code and use it to retrieve D3 image for use in a PDF file. This has been working great until I tried it on Microsoft Edge. Anybody run across this or have suggestions on how to work around it. Basically the image comes back with a black center. 

```
http://code.google.com/p/canvg/
function getChartImage(chartId: string): string {
"use strict";

var svg: any = document.querySelector("svg");
var svgData: any = new XMLSerializer().serializeToString(svg);
var canvas: any = document.getElementById("canvas");
var result: any = canvg(canvas, svgData);

return canvas.toDataURL("text/png");
}

```

Top image using IE. Bottom image using Edge.

[![enter image description here](https://i.stack.imgur.com/3omDb.png)](https://i.stack.imgur.com/3omDb.png)

EDIT: Created jsfiddle to test with. The problem can be seen if you use Edge as the browser.

<http://jsfiddle.net/jjhii/46bv10db/1/>