title: d3.js: How to rotate an SVG around its center while translating?
body: <h1>The Problem:</h1>
  
  <p>I have been trying, to no avail, to find a general solution for simultaneously rotating and translating an SVG with d3.js v4.2.2.</p>
  
  <p>I can get the SVG starting and ending in the correct positions, but the easing in-between is all wrong. Below is a JSFiddle where I have done a rotate+translate on many instances of the same SVG pulled from the DOM, each to a different amount rotation according to the datapoint.</p>
  
  <p>A key thing to note is that I need this solution to work when translating from (100,100) to (500,500) just as well as when I start from (0,0).</p>
  
  <p><a href="https://jsfiddle.net/3jbv23em/" rel="nofollow noreferrer">https://jsfiddle.net/3jbv23em/</a></p>
  
  <pre><code>var serializer = new XMLSerializer();
  
  var svgNode = serializer.serializeToString(document.querySelector('#svgs svg defs svg'));
  
  var dataset = [1,8,15,22,29,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155,162,169,176,183,190,197,204,211,218,225,232,239,246,253,260,267,274,281,288,295,302,309,316,323,330,337,344,351,358]
  
  var wrapper = d3
      .select('#game svg')
          .attr('width', window.innerWidth)
          .attr('height', window.innerHeight)
      .selectAll('g')
          .data(dataset)
          .enter()
          .append('g')
              .html(function(d) { return svgNode; })
              .transition()
              .duration(1500)
              .attr('transform', function(d) { 
                  return 'translate(500,300)' +
                         'rotate(' + d * 1.8 + ', 63, 54.77)';
              });
  </code></pre>
  
  <p>(Unfortunately, I wasn't able to get D3 v4 working in JSFiddle, so JSFiddle is using v3 here. However, the problem is the same).</p>
  
  <p><strong>My expected behaviour</strong>: All of the chickens rotate around the same center, never extending past the dimensions of the circle seen at the end of the animation.</p>
  
  <p><strong>The actual result</strong>: All chickens rotate around the translated original position of the top left corner before returning to the correct position at the end.</p>
  
  <h1>Solutions That Didn't Work for Me:</h1>
  
  <p><a href="https://stackoverflow.com/questions/14872687/how-to-rotate-an-object-around-the-center-in-d3-js">How to rotate an object around the center in d3.js</a></p>
  
  <ul>
  <li>This is about rotating around a fixed point further away, not around a point on the object one is trying to rotate</li>
  </ul>
  
  <p><a href="https://stackoverflow.com/questions/22071952/svg-rotation-anchorpoint">SVG rotation anchorpoint</a></p>
  
  <ul>
  <li>This might work, but completely takes me out of the D3 ecosystem</li>
  </ul>
  
  <p><a href="https://stackoverflow.com/questions/21412043/how-do-i-rotate-or-scale-transform-an-svg-path-relative-to-its-center-point">How do I rotate or scale (transform) an SVG path relative to its center point?</a></p>
  
  <ul>
  <li>I need the solution to start from an arbitrary point, not always the origin @ (0,0)</li>
  </ul>
  
  <h1>In Conclusion:</h1>
  
  <p>I'm pretty bewildered at the moment, and any help is greatly appreciated. Thanks for your time.</p>