title: SVG donut-shape with access of both circles
body: <p>I want to create an SVG donut shape (circle with another empty circle inside). I want to be able to access &amp; resize both circles, eg via their id attributes. This will allow for animation.</p>
  
  <p>I have considered three approaches but none are that great:</p>
  
  <ul>
  <li>complex path: does not allow for access of the inner circle via #id</li>
  <li>outline stroke: possible but complicated for my purpose (would have to reposition as I increase stroke)</li>
  <li>clippath/mask: Doesn't work like a compound path, only an outer box</li>
  </ul>
  
  <p>Is there a way of doing this?</p>