SVG - Line at baseline - svg

Question

I am drawing something here as you can see.
But there is a problem: the lines at the very top and very bottom of the image (the black "ruler") are only half the width because the "base" of the line is in the center.
For a text field, I was able to reposition the dominant-baseline and thus position my texts perfectly. However, a line (or path) doesn't seem to have a baseline.
How can I make sure my lines are at the very top and very bottom? Is the only way to do this to hard position them at the line width / 2? I tested this out, and it works perfectly, however, I'm not the biggest fan of hard coding these numbers. Is there a way not to hard code this?
Here's my code and my example image:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0" y2="0" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="100%" y2="100%" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a Fiddle if you want to try it out. Just zoom in really far.
https://jsfiddle.net/jkom2x8f/1/

Answer 1

Your solution is the correct solution. It is the only real solution. There is nothing wrong with it.

Answer 2

It seems that after a lot of searching around and reading the comments, I concluded that hard coding the y positions to 0.5 and 199.5 is the only way to do it:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0.5" y2="0.5" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="199.5" y2="199.5" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a fiddle:
https://jsfiddle.net/jkom2x8f/5/