D3在MS Edge上成像

Question

我有以下代码并使用它来检索D3图像以便在PDF文件中使用。这一直很有效，直到我在Microsoft Edge上尝试它。任何人都遇到过这个或者有关于如何解决它的建议。基本上，图像以黑色中心返回。

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");
}

使用IE的顶级图像。底部图像使用Edge。

编辑：创建jsfiddle以进行测试。如果您使用Edge作为浏览器，则可以看到问题。

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

Answer 1

<强>问题：

由于a bug in Microsoft Edge，它会创建许多属性，包括填写资本。并且canvg无法正常使用。

<强>解决方案：

1. 从capital更改所有属性名称（除了像viewBox和markerWidth这样的camel case） 在你的svgData中小写

2. 有a pool request canvg。但它并不保护viewBox和其他少数驼峰案例属性中的资本B.所以你可以合并 您自己的池请求（在viewBox的代码中执行异常 如果你有，并使用它。

Answer 2

尝试删除xmlns属性：jsfiddle

svg = '<svg id=\"svgId\"