ariadadev schrieb: > Hi there, > > I'm quite new to SVG but I'm using it to create all the user > interface decorations of an HTML web page. I'm rasterizing the > elements using Batik 1.5. > > I'm just stuck at the moment on how to create an arc (quarter > circle) with a border of radial gradient in order to create a sort > of 3D effect. I've got this so far: > > <svg xmlns="http://www.w3.org/2000/svg"; > xmlns:xlink="http://www.w3.org/1999/xlink"; x="0" y="0" width="50" > height="100"> > <style type="text/css"> > .mainColour{fill:#DBBB75} > </style> > <defs> > <linearGradient id="highlight"> > <stop offset="0%" stop-color="#968050"/> > <stop offset="50%" stop-color="#FFF5EB"/> > <stop offset="90%" stop-color="#DBBB75"/> > </linearGradient> > <radialGradient id="radHighlight" cx="50" cy="50" r="40"> > <stop offset="0%" stop-color="#968050"/> > <stop offset="5%" stop-color="#FFF5EB"/> > <stop offset="9%" stop-color="#DBBB75"/> > </radialGradient> > </defs> > <path class="mainColour" d="M50,0 A50,50 0 0,0 0,50 L0,100 L50,100 > L50,0 Z"/> > <rect fill="url(#highlight)" x="0" y="50" width="10" height="50"/> > <path fill="url(#radHighlight)" d="M50,0 A50,50 0 0,0 0,50"/> > </svg> > > You'll notice that the rect at the bottom has a highlight on its > left hand side; I want the same effect around the edge of the arc. > > Any ideas? > > Cheers, > ariadadev > Hi ariadadev
i think what you want is not possible with SVG gradients you would have to use a filter to create this type of effect. something like this: http://www.w3.org/TR/SVG11/filters.html#AnExample hth Holger ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
