SVG Line with Gradient Stroke Won't Display Straight

Question

I\'m attempting to replicate an

---

with SVG. Now, making a straight line with SVG works perfectly, but the second I stroke it with a gradient it will no

Answer 1

Assuming you do not want any in-accuracy at all, you can change the line to a filled path as below

or alternatively to a filled rect as below

It is also interesting to note that this issue only affects vertical and horizontal lines. Slanted line display correctly.