CODEWITHSUNDEEP
angularjssvgnvd3.jsangularjs-nvd3-directivesangular-nvd3
martin
martin

Reputation: 1974

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.

Upvotes: 1

Views: 3198

Answers (2)

Timber
Timber

Reputation: 373

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

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101918

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

Upvotes: 2

Related Questions