saveSvgAsPng - getBBox is not a function

Question

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.

Answer 1

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

Answer 2

This worked for me

import saveSvgAsPng from "save-svg-as-png"

let svgDownloadButton = document.getElementsByTagName('button')
svgDownloadButton.addEventListener('click', function () {
    console.log("clicked")
    var svg = document.getElementById("chart1-svg").getElementsByTagName("svg")[0];
    saveSvgAsPng.saveSvgAsPng(svg, "diagram.png");
})