xmlgraphics-batik-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Thomas DeWeese <thomas.dewe...@gmail.com>
Subject Re: SVG question: gradient perpendicular to line
Date Sat, 24 Nov 2012 12:28:56 GMT
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 <oliver@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
>
>

Mime
View raw message