Search code examples
angularjssvgnvd3.jsangularjs-nvd3-directivesangular-nvd3

saveSvgAsPng - getBBox is not a function


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");
    }