Page 1 of 1

radial gradient makes "pie slice"?

Posted: Mon Apr 13, 2015 11:25 pm
by bartovan
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 4475 times

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 4:04 am
by brynn
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?

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 3:29 pm
by bartovan
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?

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 8:33 pm
by ragstian
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.)

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 9:29 pm
by tylerdurden
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 4402 times

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 9:39 pm
by bartovan
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 4398 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 4398 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 4398 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.

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 9:53 pm
by ragstian
Hi.

Just downloaded and installed Chrome, I can verify your find, the figure does not render correctly in Chrome!

Re: radial gradient makes "pie slice"?

Posted: Tue Apr 14, 2015 10:10 pm
by bartovan
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...

Re: radial gradient makes "pie slice"?

Posted: Sat Dec 10, 2016 4:28 pm
by slobeck
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.

Re: radial gradient makes "pie slice"?

Posted: Sat Dec 10, 2016 9:03 pm
by Moini
Conical gradients are also part of the new gradient mesh tool, @slobeck: http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients