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?


The result is:

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?

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?

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.

(Right_Click the image to download the SVG file.)

Chrome under windowsXP:

On the left, forum embedded image. On the right, original downloaded and opened in Chrome.

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



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:


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



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

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.

Hi.

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

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...

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.

Conical gradients are also part of the new gradient mesh tool, @slobeck: http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients