test/math/transform-rotate-origin-test.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../d3.js"></script>
<script>

var width = 960,
    height = 500;

var cross = d3.svg.symbol()
    .type("cross")
    .size(10000);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

svg.append("path")
    .style("fill", "steelblue")
    .attr("d", cross);

svg.append("path")
    .style("fill", "darkgreen")
    .attr("d", cross)
    .attr("transform", "rotate(45 200,200)");

svg.append("path")
    .style("fill", "white")
    .style("fill-opacity", .2)
    .style("stroke", "steelblue")
    .style("stroke-width", "4px")
    .attr("d", cross)
  .transition()
    .duration(1000)
    .style("stroke", "darkgreen")
    .attr("transform", "rotate(45 200,200)");

</script>