D3 到 MS Edge 上的图像答案

【问题标题】：D3 to image on MS EdgeD3 到 MS Edge 上的图像
【发布时间】：2016-02-03 17:33:48
【问题描述】：

我有以下代码并使用它来检索 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/

【问题讨论】：

标签： d3.js microsoft-edge canvg

【解决方案1】：

问题：

由于a bug in Microsoft Edge，它创建了许多属性，包括填充大写。而且 canvg 不能正常工作。

解决方案：

从大写更改所有属性名称（除了 viewBox 和 markerWidth 之类的驼峰式名称）在您的 svgData 中小写
里面有a pool request 可以。但它不保护 viewBox 和其他几个驼峰属性中的大写 B。所以你可以合并自己的那个池请求（在 viewBox 的代码中做一个异常如果有的话）并使用它。

【讨论】：

是的，将 toLowerCase 添加到 canvg.js 文件解决了问题。我需要查看您的其他 cmets 并进行一些测试。谢谢！

【解决方案2】：

尝试删除 xmlns 属性：jsfiddle

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

【讨论】：