How to add a linearGradient to a vertical SVG line [duplicate] - html

Question

This question already has answers here:
SVG gradient for perfectly horizontal path
(2 answers)
Closed 3 years ago.
I'm trying to add a gradient to the stroke of a line which fades out at the top but having no luck. Actually I kind of got it working like this, but it has browser issues even in Chrome certain SVG sizes where the gradient just breaks and is solid:
<linearGradient
id='whiteFadeGrad'
x1={svgHeight}
y1='0'
x2='0'
y2={svgHeight}
gradient-units='userSpaceOnUse'
>
<stop offset='0' stop-color='rgba(255,255,255,0)' />
<stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>
I would much rather stick to using percentage units, but can't get it to work:
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
Thanks

Answer 1

It looks like a bug and a hack, but worked:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120.001" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
You might probably use <rect> instead of <line>, which is not so hacky:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<rect x="120" y="0" width="4" height="200" style="fill: url('#fadeGrad'); shape-rendering: crispEdges;" />
</svg>

Answer 2

Check this, I dont know much about SVG, but a simple googling does the job for me.
Could you please go through the code.
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id="e" x1="40" y1="210" x2="400" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
<stop stop-color="steelblue" offset="0" />
<stop stop-color="red" offset="1" />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:10px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#e'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>