7

I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a solution to this problem ? I need to create a canvas element from svg element.

<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 : The svg element is created by C3.js (D3.js based reusable library).

SriDev
  • 71
  • 1
  • 4
  • 2
    Your JSFiddle doesn't work and when fixed it does not display the error you are describing (at least in Chrome). Added some missing styles for canvg and it's working: http://jsfiddle.net/00cyv0py/ – methodofaction Jun 09 '15 at 23:23
  • Thanks a lot !! It worked !! – SriDev Jun 10 '15 at 18:32
  • @Duopixel I was facing the exact same issue and your comments help me on that. But one another thing that I am unable to resolve is the text styles , if you see the axis labels the fonts size are smaller than the one that is generated on the image. Any idea how to resolve that? – Sam Sep 23 '15 at 14:48
  • 1
    @Mugambo you need to inline the styles to the text elements, i.e. `d3.select("text").attr("font-family", "sans-serif").attr("font-size", "13px")` – methodofaction Sep 23 '15 at 21:21
  • @Duopixel: Thanks that helps!! – Sam Sep 24 '15 at 07:47

1 Answers1

2

As suggested in the comments and on the working jsfiddle, explicitly set tick and path characteristics before generating the canvas:

<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>

See: http://jsfiddle.net/vcz468f9/5/

Chris Buck
  • 745
  • 5
  • 15
  • I also had some fonts I wanted to bring across that were drawing in my svg, but not when I exported it to a canvas. I used the code above to remove the black bit from my splin, then added the following get the font I wanted. d3.selectAll("text").attr("font-family", "arial"). Awesome answer, thanks. – Severun Mar 31 '17 at 18:12