Nice lateral (ho ho) thinking. Oliver
On 24 Nov 2012, at 12:28, Thomas DeWeese <thomas.dewe...@gmail.com> wrote: > Hi Oliver, > There isn't a good general way to apply a gradient perpendicular to a > line. The best option I can think of would be to always have your line > always going 0,0 to <Length>,0 and then use a transform to place and rotate > the line. > > On Fri, Nov 16, 2012 at 4:14 AM, Oliver Kohll <oli...@gtwm.co.uk> wrote: > 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 > >
