我正在尝试使用 Canvg 将 SVG 转换为 Canvas。这里是jsfiddle http://jsfiddle.net/sridev24/vcz468f9/。我收到一条错误消息“错误：元素‘parsererror’尚未实现”。我可以理解 canvg 库无法解析 SVG 元素。但是，这个问题有解决办法吗？我需要从 svg 元素创建一个 canvas 元素。
<head>
<link href="lib/c3.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/d3.min.js" charset="utf-8"></script>
<script src="lib/c3.min.js"></script>
<script type="text/javascript" src="lib/canvg.js"></script>
<script type="text/javascript" src="lib/rgbcolor.js"></script>
</head>
<body>
<div id="chart"></div>
<button onclick="myFunction()">Save</button>
<header><h1>Canvas:</h1></header>
<canvas id="svg-canvas"></canvas>
<script>
var chart = {};
chart = c3.generate({
bindto: '#chart',
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', '2013-01-01 03:11:37', '2013-01-02 03:11:37', '2013-02-03 03:11:37', '2013-03-04 03:11:37', '2013-03-05 03:11:37', '2013-04-06 03:11:37'],
['x2', '2013-01-04 03:11:37', '2013-01-22 03:11:37', '2013-04-13 03:11:37', '2013-05-04 03:11:37', '2013-05-02 03:11:37', '2013-06-06 03:11:37'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 20, 180, 240, 100, 190,230]
],
xFormat: '%Y-%m-%d %H:%M:%S',
names: {
data1: 'Success',
data2: 'Failure',
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S',
count : 5
}
}
},
zoom: {
enabled : true,
rescale: true,
extent: [1, 100]
}
});
chart.show(['data2']);
function myFunction() {
var $container = $('#chart'),
// Canvg requires trimmed content
content = $container.html().trim(),
canvas = document.getElementById('svg-canvas');
// Draw svg on canvas
canvg(canvas, content);
}
</script>
</body>
</html>
P.S ： svg 元素是由 C3.js （基于 D3.js 的可重用库）创建的。
