saveSvgAsPng - getBBox is not a function

Issue

I'm using exupero's saveSvgAsPng library to save SVG's to PNG-files, but I've run into a problem when combining it with Angular-Nvd3.

I get an error saying:

Uncaught TypeError: el.getBBox is not a function

Which to me seems like the function cannot "grab" the SVG-element from my nvd3-element.

My code looks like this:

HTML:

  <button onclick = "saveAsPng();" type="button" name="button"></button>

            <div id = "chart1-canvas">
              <nvd3 id = "chart1-svg" options="options1" data="data1"></nvd3>
            </div>

Javascript:

  function saveAsPng(){
    saveSvgAsPng(document.getElementById("chart1-svg"), "diagram.png");
  }

Any suggestions on how to make this work properly would be appreciated.

Solution

I haven't used that saveSvgAsPng library, but I imagine it expects you to pass it a pointer to an SVG element, not the AngularJS element that surrounds it.

Try the following:

function saveAsPng() {
   var svg = document.getElementById("chart1-svg").getElementsByTagName("svg")[0];
   saveSvgAsPng(svg, "diagram.png");
}    

Answered By - Paul LeBeau