D3 Examples - Save SVGs from d3 transiton

xxxxxxxxxx
 
<html>
  <head>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://eligrey.com/demos/filesaver.js/blob.js"></script>
    <script src="https://eligrey.com/demos/filesaver.js/filesaver.js"></script>
    <style>
      svg { border:1px solid black; }
    </style>
​
  </head>
  <body>
    <div class="svg-holder">
     <svg id="svg" width="480" height="240" xmlns="https://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red" />
      </svg></div> <br/>
    <button id="b1" type="button">Animate</button>
    </body>
    <script type="text/javascript">
      var svg = d3.select("svg");
      var b1 = d3.select("#b1");
      var totalDuration = 2000; // total duration of all animations
      var frameRate = 40; // milliseconds per frame, 40 milliseconds is 1/25th of a second ie 1 frame @25fps
      var totalFrames = totalDuration / frameRate;
      var n = 0;
      var id = 0;
      function downloadSVGs() {
        try {
            var isFileSaverSupported = !!new Blob();
        } catch (e) {
            alert("blob not supported");
        }
​
        var html = document.querySelector('.svg-holder').innerHTML
        var blob = new Blob([html], {type: "image/svg+xml"});
        function saveas () {
          saveAs(blob, id + "_myProfile.svg");
          id++
        }
        setTimeout(saveas, totalDuration); // set dealy on saving as it interrupts the transition
        if(n++ >= totalFrames)
          return;
        setTimeout(downloadSVGs, frameRate); 
      }
​
      b1.on("click", function() {
        svg.select("circle").transition().duration(1000).attr("cx", 300);
        svg.select("circle").transition().delay(1000).duration(1000).attr("r", 120);
        downloadSVGs();
      });
    </script>
</html>
    