Skip to content

Instantly share code, notes, and snippets.

@sdbernard

sdbernard/index.html

Created October 25, 2015 16:54
Show Gist options
  • Save sdbernard/afbb899e60902ad42064 to your computer and use it in GitHub Desktop.
Save sdbernard/afbb899e60902ad42064 to your computer and use it in GitHub Desktop.
Download ZIP
Save SVGs from d3 transiton
Raw
index.html
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://eligrey.com/demos/FileSaver.js/Blob.js"></script>
<script src="http://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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment