Search code examples
d3.jsmicrosoft-edgecanvg

D3 to image on MS Edge

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

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

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

Solution

  • Problem:

    Because of a bug in Microsoft Edge, it creates many attributes including fill in capital. And canvg doesn’t work properly with that.

    Solution:

    1. Change all of the attribute names (except camel case ones like viewBox and markerWidth) from capital to lower case in your svgData

    2. There is a pool request for that in canvg. But it doesn’t protect capital B in viewBox and other few camel case attributes. So you can merge that pool request by yourself (do an exception in code for viewBox if you have any) and use it.