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 无法正常工作。

解法：

将所有属性名称（除了像 viewBox 和 markerWidth 这样的驼峰命名）从大写改成在你的 svgData
a pool request 画布。但它不保护 viewBox 中的大写字母 B 和其他一些驼峰式属性。所以你可以合并您自己请求池（在 viewBox 的代码中做一个例外如果你有的话）并使用它。

Answer 2

尝试删除 xmlns 属性：jsfiddle

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

D3 到 MS Edge 上的图像

D3 to image on MS Edge

d3.js

canvg

microsoft-edge