title: Rotating an SVG image using D3.JS not working
body: <p>I've been trying to rotate some gears in an svg image clockwise repeatedly using D3.js but I can't seem to understand what's wrong with the code or the image. I was able to translate and rotate each gear  using this code below...</p>
  <pre><code>d3.selectAll(&quot;.st6&quot;)
    .transition()
    .delay(function(d, i, n) { return i * 50; })
    .on(&quot;start&quot;, function repeat() {
        d3.active(this)
          .transition()
          .duration(2500)
          .attr('transform', 'rotate(0)')
          .transition() //And rotate back again
          .duration(2500)
          .attr('transform' , 'rotate(90) ')
          .on(&quot;start&quot;, repeat); //at end, call it again to create infinite loop
    });
  </code></pre>
  <p>But when I tried using the same code that did rotate a text repeatedly for me, the image became static and not moving again...</p>
  <p>here is the code that rotate a text repeatedly for me...</p>
  <pre><code>var width = 600;
  var height = 300;
      
  var holder = d3.select(&quot;body&quot;)
  .append(&quot;svg&quot;)
  .attr(&quot;width&quot;, width)    
  .attr(&quot;height&quot;, height); 
      
  //draw the text
  holder.append(&quot;text&quot;)
    .style(&quot;fill&quot;, &quot;black&quot;)
    .style(&quot;font-size&quot;, &quot;56px&quot;)
    .attr(&quot;dy&quot;, &quot;.35em&quot;)
    .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
    .attr(&quot;transform&quot;, &quot;translate(300,150) rotate(0)&quot;)
    .text(&quot;Hi, how r u doing&quot;);
      
  var i = 0;
  var timeInterval = 10;
  setInterval(function(){
      i += 1;
      update(i % 360) 
  }, timeInterval);
      
  var n;
  // update the element
  function update(n) {
      // rotate the text
      holder.select(&quot;text&quot;)
        .attr(&quot;transform&quot;, &quot;translate(300,150) rotate(&quot;+n+&quot;)&quot;);
  }
  </code></pre>
  <p>Here is what I tried replicating the above method but to no avail...</p>
  <pre><code>var width = 600;
  var height = 300;
      
  var holder = d3.select(&quot;body&quot;)
    .append(&quot;svg&quot;)
    .attr(&quot;width&quot;, width)    
    .attr(&quot;height&quot;, height); 
      
  holder.append(&quot;svg:image&quot;)
    .attr(&quot;image-anchor&quot;, &quot;middle&quot;)
    .attr(&quot;xlink:href&quot;, &quot;produc.svg&quot;)
    .attr(&quot;transform&quot;, &quot;translate(300,150) rotate(0)&quot;)
  // Initial starting angle of the text
      
  var i = 0;
  var timeInterval = 10;
  setInterval(function(){
      i += 1;
      update(i % 360) 
  },timeInterval);
      
      
  var n;
  // update the element
  function update(n) {
      // rotate the text
      holder.select(&quot;text&quot;)
        .attr(&quot;transform&quot;, &quot;translate(300,150) rotate(&quot;+n+&quot;)&quot;);
  }
  </code></pre>
  <p>Here is a working example on CodePen<a href="https://codepen.io/pellumie/pen/LYREwZo" rel="nofollow noreferrer">click here</a></p>