SVG question: gradient perpendicular to line

Hi,

Does anyone know if it's possible to apply a gradient perpendicular to a line in SVG? I have the following code:


<svg contentScriptType="text/ecmascript" width="2000" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" height="1000" viewBox="0 0 2000.0 1000.0" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<linearGradient gradientTransform="" x1="0%" xmlns:xlink="http://www.w3.org/1999/xlink" gradientUnits="objectBoundingBox" x2="0%" y1="0%" y2="100%" xlink:type="simple" xlink:actuate="onLoad" id="linear0" xlink:show="other" spreadMethod="pad">
<stop style="stop-color:#000000;stop-opacity:1;" offset="0%"/>
<stop style="stop-color:#ffffff;stop-opacity:1;" offset="100%"/>
</linearGradient>
</defs>
<path style="stroke:url(#linear0);fill:none;stroke-width:30.0;" d="M62 175L404 177"/>
</svg>


Now in the <linearGradient> element, if you make x1=0%, x2=100%, y1=0%, y2=0% you get a horizontal gradient from black to white across the line. However if I try to rotate the gradient by 90 deg. by making x1=0%, x2=0%, y1=0%, y2=100%, it nearly works but the gradient isn't smooth, but just has one half black and the other half white.

What I'd like to do in the end is apply a gradient to make the line look like a tube. Is this possible?

Cheers
Oliver Kohll

www.agilebase.co.uk