title: Position SVG elements over an image
body: <p>Is it possible to have the following elements and style them so that the SVG objects appear over the image (i.e. like part of the image)? </p>
  
  <p>Currently they are displayed below it on a new row.</p>
  
  <p>I know I could set the image as a background image of the parent div, but unfortunately I also need to be able to rotate it within the parent so I don't think that is an option.</p>
  
  <pre><code>&lt;div id='edit-area' style='position:relative; overflow:none; display:inline-block; border: 1px black solid; width: 950px; height: 500px;'&gt;
      &lt;img src='/my_image.png' /&gt;
      &lt;svg id="edit-svg" height="500" width="950"&gt;
          &lt;!-- there will be lines, rectangles etc in here --&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>