title: Translating SVG elements for an Isometric view
body: <p>I'm working on some JavaScript code to render standard 2D SVG/Canvas elements (drawn with <a href="http://raphaeljs.com/" rel="nofollow noreferrer">Raphael-JS</a>) in an isometric <em>3Dish</em> view. </p>
  
  <p>Say we have two rectangles drawn next to each other. I then have them redrawn at the correct angles (basically a 30 degree twist) for an isometric view.</p>
  
  <p><img src="https://i.stack.imgur.com/4tIlq.png" alt="alt text"></p>
  
  <p>(<em>In the image above I've shown the origin for two corresponding elements.</em>)</p>
  
  <p>My problem is I don't know how to properly translate all the individual elements so they "tile" correctly instead of just overlapping. </p>
  
  <p>While actually using tiles would make things easier as I could just base any given tile's placement on the one before it, tiles won't work in this case. Everything is dynamic and will be more complex than simple x/y planes.</p>
  
  <p><a href="https://imgur.com/Ib8TG" rel="nofollow noreferrer">Here is an image of some isometric tiles</a> if there's any confusions as to how I want these objects to be placed. </p>