1

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/

John Hughes
  • 367
  • 1
  • 3
  • 20

2 Answers2

1

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.

DaNeSh
  • 1,022
  • 1
  • 14
  • 24
  • Yes adding the toLowerCase to the canvg.js file fixed the problem. I will need to review your other comments and do some testing. Thanks! – John Hughes Feb 11 '16 at 21:17
0

Try removing the xmlns property: jsfiddle

svg = '<svg id=\"svgId\"
user3042276
  • 1
  • 1