Question

我正在尝试使用Canvg将SVG转换为Canvas。这是jsfiddle。我收到一条错误消息，＆＃34;错误：元素＆＃39; parsererror＆＃39;尚未实施＆＃34;。我可以理解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的可重用库）创建。

Answer 1

正如评论和工作jsfiddle所建议的那样，在生成画布之前明确设置tick和path特性：

<div id="chart"></div>
<button id="save">Save</button>
<h1>Canvas:</h1>
<canvas id="svg-canvas"></canvas>
<script>

...

$('#save').click(myFunction);

function myFunction() {
  d3.selectAll("path").attr("fill", "none");
  d3.selectAll(".tick line, path.domain").attr("stroke", "black");
    var $container = $('#chart'),
    // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('svg-canvas');

    // Draw svg on canvas
    canvg(canvas, content);
}
</script>

请参阅：http://jsfiddle.net/vcz468f9/5/

C3.js使用canvg对Canvas进行SVG可视化 - 用黑色矩形填充的折线图，＆＃34; ERROR：Element＆＃39; parsererror＆＃39;尚未实施＆＃34;

1 个答案: