radial gradient makes "pie slice"?

Discuss SVG code, accessible via the XML Editor.
User avatar
bartovan
Posts: 191
Joined: Sun Feb 09, 2014 4:14 am
Location: Belgium
Contact:

radial gradient makes "pie slice"?

Postby bartovan » Mon Apr 13, 2015 11:25 pm

I'm studying this page about radial gradients on w3schools, and trying to figure out why the following SVG-code (example 2) results in a "pie slice" (a part of an ellipse), can anyone shed some light?

Code: Select all

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>


The result is:
radial_gradient.PNG
radial_gradient.PNG (1.44 KiB) Viewed 3426 times
Portfolio bartovan.com
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.

User avatar
brynn
Posts: 9604
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: radial gradient makes "pie slice"?

Postby brynn » Tue Apr 14, 2015 4:04 am

I can't help you with the SVG/XML code, but it looks like that's not a full ellipse. If you fill it with a solid color, is it a full ellipse?

User avatar
bartovan
Posts: 191
Joined: Sun Feb 09, 2014 4:14 am
Location: Belgium
Contact:

Re: radial gradient makes "pie slice"?

Postby bartovan » Tue Apr 14, 2015 3:29 pm

brynn wrote:I can't help you with the SVG/XML code, but it looks like that's not a full ellipse. If you fill it with a solid color, is it a full ellipse?


Yes, it is, that's the strange part of it.
By changing the cx, cy, r, fx and fy values (for instance all to 50%) of the gradient (without changing the ellipse definition), you can get a full ellipse with a radial gradient fill.
The question is: how can it be that a radial gradient causes the ellipse to become partial?
Portfolio bartovan.com
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.

User avatar
ragstian
Posts: 1159
Joined: Thu Oct 11, 2012 2:44 am
Location: Stavanger-Norway

Re: radial gradient makes "pie slice"?

Postby ragstian » Tue Apr 14, 2015 8:33 pm

Hi.

Which version of Inkscape do you use?
The ellipse shows without problems in my Inkscape (Inkscape 0.91 r13725) and also in all the browsers I use.
Image
(Right_Click the image to download the SVG file.)
Good Luck!
( ͡° ͜ʖ ͡°)
RGDS
Ragnar

tylerdurden
Posts: 1817
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: radial gradient makes "pie slice"?

Postby tylerdurden » Tue Apr 14, 2015 9:29 pm

Chrome under windowsXP:

On the left, forum embedded image. On the right, original downloaded and opened in Chrome.
2015-04-14_07-26-45.png
2015-04-14_07-26-45.png (46.19 KiB) Viewed 3353 times
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
bartovan
Posts: 191
Joined: Sun Feb 09, 2014 4:14 am
Location: Belgium
Contact:

Re: radial gradient makes "pie slice"?

Postby bartovan » Tue Apr 14, 2015 9:39 pm

In Inkscape it's fine, a full ellipse with a gradient.

ellipse_radial_gradient_3.PNG
In Inkscape
ellipse_radial_gradient_3.PNG (35.54 KiB) Viewed 3349 times


So it's my browser, I guess. I use Chrome, latest version 41.0.2272.118 m (on Windows 7).
This is how it looks like for me:

ellipse_radial_gradient.PNG
In Inkscapeforum
ellipse_radial_gradient.PNG (26.69 KiB) Viewed 3349 times

And the image you posted above, downloaded and opened in Chrome:

ellipse_radial_gradient_2.PNG
In Chrome
ellipse_radial_gradient_2.PNG (26 KiB) Viewed 3349 times


Did I find a bug in Chrome? Does Google offer rewards for that :D ?

Also have a look at this page: http://www.w3schools.com/svg/svg_grad_radial.asp, where I got it from: example 2 near the bottom. Full ellipse or partial ellipse? With me, it's partial.
Portfolio bartovan.com
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.

User avatar
ragstian
Posts: 1159
Joined: Thu Oct 11, 2012 2:44 am
Location: Stavanger-Norway

Re: radial gradient makes "pie slice"?

Postby ragstian » Tue Apr 14, 2015 9:53 pm

Hi.

Just downloaded and installed Chrome, I can verify your find, the figure does not render correctly in Chrome!
Good Luck!
( ͡° ͜ʖ ͡°)
RGDS
Ragnar

User avatar
bartovan
Posts: 191
Joined: Sun Feb 09, 2014 4:14 am
Location: Belgium
Contact:

Re: radial gradient makes "pie slice"?

Postby bartovan » Tue Apr 14, 2015 10:10 pm

Maybe related to Chrome Issue 322487 ?

In any case, it's normal that I didn't understand why the SVG code displayed as a partial ellipse (it shouldn't), and it's not an Inkscape bug. So as far as Inkscape and SVG is concerned, problem solved... Remains weird behavior in Chrome...
Portfolio bartovan.com
Tumblr / Instagram / Pinterest / Facebook / Twitter / OpenClipArt
Shop at Society6 / RedBubble
Using latest stable Inkscape on Ubuntu (current stable release) and Win 7.

slobeck
Posts: 5
Joined: Fri Jul 01, 2016 1:26 pm

Re: radial gradient makes "pie slice"?

Postby slobeck » Sat Dec 10, 2016 4:28 pm

If what you're trying to make is a "sweep" or "conical" gradient, use the "tiled clones feature" - its a little complicated the first time, but it works and in practice isn't as much of a pain in the behind as it might seem up front. I'm tired, but i'll try and link to a tutorial when i wake up.

Moini
Posts: 2222
Joined: Mon Oct 05, 2015 10:44 am

Re: radial gradient makes "pie slice"?

Postby Moini » Sat Dec 10, 2016 9:03 pm

Conical gradients are also part of the new gradient mesh tool, @slobeck: http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)


Return to “SVG / XML Code”

Who is online

Users browsing this forum: No registered users and 2 guests