title: Transition Animation Using React and SVG
body: <p>I have a React component that generates some SVG, like so:</p>
  
  <p><code>
  &lt;svg width="1200" height="300" data-reactid=".0"&gt;
    &lt;path d="M150 200 l300 10 l0 40 l-300 -10z" fill="green" data-reactid=".0.$http=2//localhost=28080/api/shapes/1"&gt;&lt;/path&gt;
    &lt;path d="M300 50 l50 50 l-100 0z" fill="purple" data-reactid=".0.$http=2//localhost=28080/api/shapes/3"&gt;&lt;/path&gt;
    &lt;path d="M40 40 H10 V10 H-10 S 50 30 10 44z" fill="brown" data-reactid=".0.$http=2//localhost=28080/api/shapes/4"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></p>
  
  <p>The <code>&lt;path&gt;</code> elements get updated on the server.  Because it uses a virtual DOM, react only creates/deletes elements it needs to.  The <code>d=</code> attributes can change, moving the elements around.</p>
  
  <p>However, the elements jump from one place to another.  It would be nice if the elements that are moving transition to their new positions.</p>
  
  <p>Does anyone have any suggestions of the best way to achieve this?</p>