title: Merge svg with a div in a html page
body: <p>I am trying to display a flowchart on a webpage and this loads based on some options selected by the user.I am creating each element of the flow chart in a div and generating them. And after the elements are generated I am trying to draw lines connecting the elements.</p>
  
  <p>But when I do this the lines are appearing below the elements.
  Here is my code.</p>
  
  <pre><code> &lt;div class="container"&gt;
              &lt;div ng-repeat="x in elements"&gt;
                  &lt;br/&gt;
                      &lt;div id="{{y.id}}" class="box" ng-click="myfunction($event)" ng-repeat="y in x.matches"&gt;{{y.id}}&lt;/div&gt;
                  &lt;br/&gt;
              &lt;/div&gt;
  
  
              &lt;svg&gt;
                   &lt;g ng-repeat="line in lineList"&gt;
                   &lt;line ng-x1={{line.x1}} ng-y1={{line.y1}} ng-x2={{line.x2}} ng-y2={{line.y2}} style="stroke:rgb(255,0,0);stroke-width:2"/&gt;
                   &lt;/g&gt;
             &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to draw the lines in the same division the elements are created. Please let me know how this can be done. </p>
  
  <p>Any further information would be provided upon request.</p>