Advertisement


Stroke with gradient across it in Inkscape


Question

In Inkscape, or in SVG, I'd like to have a path with many differently curved sections with a stroke that has a gradient from one side to the other, not from one end to the other but from one side to the other.

This seems too simple not to have been asked before, but I can't find it.

2015/01/18
1
1
1/18/2015 10:46:00 PM

Ok, there's no mechanism in SVG to have a gradient spread outwards from the center of a stroke to the sides, which is a shame. There are a few options for emulating it in Inkscape, one is to build two thin filled shapes that are a distance apart from each other then use interpolate to add a number of shapes inbetween them with stepped colours from one to the other. Which is ok but it will result in heavy svg markup, ratty edges and only a number of steps of colour, not a true gradient.

Another option is to use blur - take a path or shape, set the full stroke width you want with the edge colour, then copy it, paste it in place (ctrl-alt-v), set the width very narrow and set it to the center colour, then set it to blur so that the blur reaches to the edge. Copy the blurred path and paste in place a few times until the gradient fills out. This is also not ideal - the blurring doesn't behave all that well around sharp corners, but it gets close enough for some purposes.

2015/01/19
1
1/19/2015 11:57:00 PM