Skip to content

Instantly share code, notes, and snippets.

@jasondavies
Created July 24, 2012 16:32
Show Gist options
  • Save jasondavies/3171055 to your computer and use it in GitHub Desktop.
Save jasondavies/3171055 to your computer and use it in GitHub Desktop.
SVG transform interpolation

An example of interpolating only the rotate component of an SVG transform.

<!DOCTYPE html>
<style>
circle {
fill: none;
stroke: #000;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
var width = 400,
height = 400;
var svg = d3.select("body").selectAll("svg")
.data([0, 1])
.enter().append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.attr("transform", "translate(200,200)");
g.append("circle")
.attr("r", 100);
var text = g.append("text")
.attr("transform", "rotate(180)translate(0,-100)")
.attr("dy", "-.3em")
.text("a");
text.filter(function(d) { return !d; }).transition()
.duration(1000)
.attr("transform", "rotate(360)translate(0,-100)");
text.filter(function(d) { return d; }).transition()
.duration(1000)
.attrTween("transform", function() {
var rotate0 = this.transform.baseVal.getItem(0).angle,
interpolate = d3.interpolateNumber(rotate0, 360);
return function(t) {
return "rotate(" + interpolate(t) + ")translate(0,-100)";
};
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment