CODEWITHSUNDEEP
htmlcsssvgpolyline
Oleg Frolov
Oleg Frolov

Reputation: 99

SVG polyline gradient apply only to stroke

I'm new in svg drawing.

Is there any option to colorize an svg <polyline> with gradient? I need to colorize only stroke, but all filters I founded is applied gradient both to stroke and body.

In fact I'm trying to make glow neon effect like this: http://screencloud.net/v/j2hE and it works fine for now with code below when I'm draw a strict line:

<linearGradient id="grad">
    <stop offset="0%" stop-color="#ffd95d"/>
    <stop offset="100%" stop-color="#ffd95d" stop-opacity="0" />
</linearGradient>

But when I'm drawing a line by circle, it looks like: http://screencloud.net/v/9M6x (bottom is start and around circle to top where finish). As you can see, gradiend is applied to all polyform, but I need it to be gradiented only line as I draw it.

Is there any option to make neon glow lines like I need it? For better understanding - I'm trying to get effect similar to default Windows screensaver named "glowing lines".

Upvotes: 2

Views: 590

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

There is no way to apply a linearGradient along the length of a line's stroke.

The only way you could do it is to draw a sequence of individually coloured line/path segments that slowly fade out.

Upvotes: 2

Related Questions