SVG gradients direction

Question

I've a map, and lines going from point A to point B.

Lines created using SVG line tag, animated using SVG animate tags, and are using gradients for their filling.

Here is the code for one gradient type :

<linearGradient id="linegradred">
    <stop offset="0%" style="stop-color:#F70D1A;stop-opacity:0" />
    <stop offset="50%" style="stop-color:#F70D1A;stop-opacity:0.3" />
    <stop offset="100%" style="stop-color:#F70D1A;stop-opacity:0.8" />
</linearGradient>

Now if I draw two lines, one from top-left to bottom-right, and another one from bottom-right to top-left, applying the gradient to them, they'll both have the same style.

I'd like the line drawn from bottom-right to top-left to have opacity 0 at bottom-right, and opacity 0.8 at top-left.

It's kind of hard to understand I guess, so here is a fiddle :

https://jsfiddle.net/hmf2nqy2/1/

line 1 is what I want. line 2 should be like line 3 (using same gradient than line 1).

(also, try to change y2 from 401 to 400 on the last line...)

What I'm looking for is basically a gradient that would apply on every line, and with line x1, y1 having opacity 0 and line x2, y2 having opacity 0.8.

Thank you for your help.

Answer 1

Actually I've just found the answer.

In order to have only one gradient it's possible to apply the rotate transformation to the line. (Gradient is applied before the transformation).

<svg height='500' width='500'>
    <defs>
        <linearGradient id="linegradred">
            <stop offset="0%" style="stop-color:#F70D1A;stop-opacity:0" />
            <stop offset="50%" style="stop-color:#F70D1A;stop-opacity:0.3" />
            <stop offset="100%" style="stop-color:#F70D1A;stop-opacity:0.8" />
        </linearGradient>        
    </defs>    
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(45, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(90, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(135, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(180, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(225, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(270, 200, 200)'></line>
    <line x1='200' y1='200' x2='300' y2='300' style='stroke-width:5;fill:url(#linegradred);stroke:url(#linegradred)' transform='rotate(315, 200, 200)'></line>
</svg>

https://jsfiddle.net/9wy5de9u/