Linear gradient across SVG line

svg line linear-gradients
Alex Nevsky picture Alex Nevsky · Mar 18, 2017 · Viewed 9.9k times · Source

I am wondering about possibility to make linearGradient across (from top to bottom) the line, as opposed to the example below where the gradient goes along (from left to right) the line.

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30" />
</svg>

enter image description here

Changing y coordinates works nicely for unrotated line and linearGradient now goes across (from top to bottom) the line:

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="195" x2="40" y2="225" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30"/> 
</svg>

enter image description here

But doesn't work for rotated:

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="235" x2="40" y2="265" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="290" stroke="url(#e)" stroke-width="30"/> 
</svg>

enter image description here

And what I want to have is the rotated line with liear gradient across it. Smth like this: enter code here

Answer

jbutler483 picture jbutler483 · Mar 18, 2017

Do you mean rotate the gradient? Then use gradientTransform

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30" />
</svg>

Related questions

How to make an SVG "line" with a border around it?

I have a little svg widget whose purpose is to display a list of angles (see image). Right now, the angles are line elements, which only have a stroke and no fill. But now I'd like to have an "inside …

Read More
Draw a Connection Line in RaphaelJS

How would I go about drawing a connection line in Raphael where the mousedown initiates the starting point of the line, the mousemove moves the end point without moving the start point and the mouseup leaves it as it is?

Read More
SVG connect two points with a line

Is there any way to connect two point using a line in SVG .I am having the following to create point in SVG. <?xml version="1.0" standalone="no"?> <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.…

Read More