title: Rotating svg elements about their center
body: <p>I have an SVG image, in which there are individual circles that I want to rotate about their own center (the center of the circles). However when I set <code>transform-origin:center</code>, and then apply a transform, it starts rotating about the center of the whole SVG image. Is there any way to set the transform origin such that the circles rotate about their own center?</p>
  
  <p>Here is the original svg image (I cannot paste the original code here so this): <a href="https://swachhcoin.com/media/token%20economy.svg" rel="noreferrer">SVG image</a></p>
  
  <p>Here is a jsfiddle for this: <a href="https://jsfiddle.net/g9zfcdm3/3/" rel="noreferrer">https://jsfiddle.net/g9zfcdm3/3/</a></p>
  
  <p>There are 4 circles in the image. Achieving this with any one cirlce would be good enough. What I actually want to achieve is to animate these circles so that they rotate indefinitely around their own center.</p>