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

Robert Longson gives an excellent explanation. But sometimes userSpaceOnUse is a pain, because it spreads the interpolation over the entire canvas, instead of just the line.

Instead, you could add a tiny amount to the values, to ensure the bbox size is not zero.

For example,

will draw a straight line with gradient.