forked from JohnDelacour‘s block: Translate and Rotate 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script >
</head>
<body>
<h4 style="position:absolute; left:50px; top:10px; font:12pt sans-serif; color:navy;">
Click the background to reanimate
</h4>
<h4 style="position:absolute; left:50px; top:10px; font:12pt sans-serif; color:navy;">
Click the background to reanimate
</h4>
<svg width="960" height="500">
<defs>
<g id="shape" transform="rotate(0)">
<path d=
"M -40 -90
c -20 33 20 66 0 100
a 60 60 0 0 0 100 0
q 30 -30 0 -100 z"
fill="#bce" opacity="0.8" stroke="magenta" />
<circle r="2" fill="none" stroke="magenta" />
</g>
</defs>
<rect id="background" width="960" height="500" fill="aliceblue" />
<path d="M 50 200 h 850" stroke="magenta" />
<g id="g0">
<g id="g1">
<use xlink:href="#shape" />
</g>
</g>
</svg>
<script type="text/javascript">
var roll = function() {
var t = 4000, d = 500, e = "linear"
d3.select("#g1")
.attr("transform", "translate(100 200)")
.transition()
.delay(d)
.duration(t)
.ease(e)
//.attr("transform", "translate(850 200)");
d3.select("#shape")
.attr("transform", "rotate(0)")
.transition()
.delay(d)
.duration(t)
.ease(e)
.attr("transform", "rotate(90)");
return;
}
d3.select("#background")
.on("click", function() { return roll(); } );
roll();
</script>
</body>
</html>