Drawing a line after an arbitrary number of SVG tspan elements - svg

Question

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.
Here's is an illustration:
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:
http://jsfiddle.net/hg3hzd4j/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(10, 15)">
<rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect>
<g transform="translate(10, 0)">
<line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<g>
<text x="0" y="20">
<tspan>Mono layer</tspan>
<tspan x="100">$50</tspan>
<tspan x="160" style="text-anchor:end">4</tspan>
<tspan x="220" style="text-anchor:end">$200</tspan>
<tspan x="0" dy="20">Single layer</tspan>
<tspan x="100">$25</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$75</tspan>
<tspan x="0" dy="20">Double layer</tspan>
<tspan x="100">$45</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$135</tspan>
<tspan x="0" dy="20">Triple layer</tspan>
<tspan x="100">$65</tspan>
<tspan x="160" style="text-anchor:end">1</tspan>
<tspan x="220" style="text-anchor:end">$65</tspan>
<!-- I'd like a line here -->
<!-- And the grand total row -->
<tspan x="0" dy="30">Total</tspan>
<tspan x="100"></tspan>
<tspan x="160" style="text-anchor:end">11</tspan>
<tspan x="220" style="text-anchor:end">$475</tspan>
</text>
<line x1="0" y1="150" x2="100%" y2="150" style="stroke:rgb(0,0,0);stroke-width:2" />
</g>
</g>
</g>
</svg>
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.

Answer 1

Add the value the dy attribute of each order line to the y coordinate of the <text> element. That will get you the absolute Y position of the baseline of the last order line.
20 + (20 + 20 + 20) = 80.
Add an appropriate amount of extra padding to get you below the descenders of characters in the last row (eg. 10).
Then set the y1 and y2 coords of your line to the final value (90 in this example).
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(10, 15)">
<rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect>
<g transform="translate(10, 0)">
<line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<g>
<text x="0" y="20">
<tspan>Mono layer</tspan>
<tspan x="100">$50</tspan>
<tspan x="160" style="text-anchor:end">4</tspan>
<tspan x="220" style="text-anchor:end">$200</tspan>
<tspan x="0" dy="20">Single layer</tspan>
<tspan x="100">$25</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$75</tspan>
<tspan x="0" dy="20">Double layer</tspan>
<tspan x="100">$45</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$135</tspan>
<tspan x="0" dy="20">Triple layer</tspan>
<tspan x="100">$65</tspan>
<tspan x="160" style="text-anchor:end">1</tspan>
<tspan x="220" style="text-anchor:end">$65</tspan>
<!-- I'd like a line here -->
<!-- And the grand total row -->
<tspan x="0" dy="30">Total</tspan>
<tspan x="100"></tspan>
<tspan x="160" style="text-anchor:end">11</tspan>
<tspan x="220" style="text-anchor:end">$475</tspan>
</text>
<line x1="0" y1="90" x2="100%" y2="90" style="stroke:rgb(0,0,0);stroke-width:2" />
</g>
</g>
</g>
</svg>