如何在 IE 8 中为 canvg() 准备 SVG？答案

【问题标题】：How can I prepare a SVG for canvg() in IE 8?如何在 IE 8 中为 canvg() 准备 SVG？
【发布时间】：2013-04-24 12:52:39
【问题描述】：

我正在尝试使用 canvg 栅格化嵌入在我的文档中的 SVG 图像。以下代码在 Firefox 17 中产生正确的输出：

//svg is a jQuery object that we selected earlier
//canvas is a canvas created earlier
//use a temporary DOM object to serialize the SVG DOM object into text;
var tmpContainer = $(document.createElement('div'));
tmpContainer.append(svg.clone());
var svgText = tmpContainer.get(0).innerHTML;
canvg(canvas.get(0), svgText);

但是，在 IE 8（我的组织支持的其他浏览器）中，svgText 永远不会获取值。我尝试了其他选项，例如 jQuery 中的 html() 方法，但收效甚微——毕竟它不是真正的 html。

我的问题是：如何在 IE8 中将 SVG 作为文本字符串获取？还有其他我没有想到的方法可以将其传递给canvg()吗？

【问题讨论】：

标签： jquery dom svg html5-canvas canvg

【解决方案1】：

好的，我有坏消息。准备好？如下：

Internet Explorer 8 中没有 SVG 之类的东西。

当我使用调试器真正查看页面源代码后，我发现 Google Charts（以及任何其他 Javascript 图表库，就此而言）使用 VML 而不是 SVG 来制作图表。这意味着我不能使用canvg() 或其他任何东西。

我的选择如下：

使用 node.js 在服务器端创建 SVG 图表。 David Padbury 详细介绍了如何使用 Highcharts 执行此操作。需要进行大量扩展，但基本思想保持不变。这是最有可能奏效的，但我对 node.js 一无所知。另外，我需要智能地设计服务器和客户端之间的接口，这样我就不用维护两个脚本了。
尝试使用 VML 转换实用程序。这看起来不是很有希望。但是，这是我的 JavaScript 必须使用的，所以如果我想将它保留在客户端，这是最直接的方法。
尝试将 SVG 支持添加到 IE 8。有像svgweb 这样的javascript 库和像Adobe's 这样的插件，它们试图将SVG 支持添加到浏览器中。但是，有一些问题。
- 由于网络大多忘记了 IE 8，因此这些选项的支持停滞不前。对 svgweb 的最后一次提交是在 2011 年 2 月，Adobe 在 2008 年底停止支持他们的插件。
- 我也不知道 Google Charts 是否正在对 SVG 支持进行功能测试，因此它可能仍然只是使用 VML 来创建图表。

【讨论】：