title: Drawing a line after an arbitrary number of SVG tspan elements
body: <p>I'd like to use SVG to create an XSLT template to generate PDFs of orders placed in a system. The idea is that I have N order positions (say between 3 and 10) which I want displayed row by row and with a horizontal line after the bottom-most row and the usual total row.</p>
  
  <p>Here's is an illustration:
  <a href="https://i.stack.imgur.com/R4MMn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4MMn.png" alt="How to position the line (and last order row) relative to the last position row?"></a></p>
  
  <p>My problem is that I cannot find out how to position the horizontal line and the final total row relative the last order position row. Here's what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/hg3hzd4j/" rel="nofollow noreferrer">http://jsfiddle.net/hg3hzd4j/</a></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;g transform="translate(10, 15)"&gt;
    &lt;rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"&gt;&lt;/rect&gt;
    &lt;g transform="translate(10, 0)"&gt;
    &lt;line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /&gt;
    &lt;line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" /&gt;
      &lt;g&gt;
        &lt;text x="0" y="20"&gt;
          &lt;tspan&gt;Mono layer&lt;/tspan&gt;
          &lt;tspan x="100"&gt;$50&lt;/tspan&gt;
          &lt;tspan x="160" style="text-anchor:end"&gt;4&lt;/tspan&gt;
          &lt;tspan x="220" style="text-anchor:end"&gt;$200&lt;/tspan&gt;
          &lt;tspan x="0" dy="20"&gt;Single layer&lt;/tspan&gt;
          &lt;tspan x="100"&gt;$25&lt;/tspan&gt;
          &lt;tspan x="160" style="text-anchor:end"&gt;3&lt;/tspan&gt;
          &lt;tspan x="220" style="text-anchor:end"&gt;$75&lt;/tspan&gt;
          &lt;tspan x="0" dy="20"&gt;Double layer&lt;/tspan&gt;
          &lt;tspan x="100"&gt;$45&lt;/tspan&gt;
          &lt;tspan x="160" style="text-anchor:end"&gt;3&lt;/tspan&gt;
          &lt;tspan x="220" style="text-anchor:end"&gt;$135&lt;/tspan&gt;
          &lt;tspan x="0" dy="20"&gt;Triple layer&lt;/tspan&gt;
          &lt;tspan x="100"&gt;$65&lt;/tspan&gt;
          &lt;tspan x="160" style="text-anchor:end"&gt;1&lt;/tspan&gt;
          &lt;tspan x="220" style="text-anchor:end"&gt;$65&lt;/tspan&gt;
          &lt;!-- I'd like a line here --&gt;
          &lt;!-- And the grand total row --&gt;
          &lt;tspan x="0" dy="30"&gt;Total&lt;/tspan&gt;
          &lt;tspan x="100"&gt;&lt;/tspan&gt;
          &lt;tspan x="160" style="text-anchor:end"&gt;11&lt;/tspan&gt;
          &lt;tspan x="220" style="text-anchor:end"&gt;$475&lt;/tspan&gt;
        &lt;/text&gt;
        &lt;line x1="0" y1="150" x2="100%" y2="150" style="stroke:rgb(0,0,0);stroke-width:2" /&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I'm by no means an expert so any suggestion is greatly appreciated. I thought I could define each position row with something similar to a DIV and that everything would shift down automatically. But obviously not.</p>