[cairo] Re: cairo gradients

Jonathan Watt jwatt at jwatt.org
Tue Apr 18 03:00:21 PDT 2006


I've recently been corresponding with David Reveman about rendering anomalies 
people are occasionally encountering with radial gradients in Mozilla's SVG 
implementation. David has kindly offered to fix the problem in cairo, but the 
question of how to do this may be of interest to others, so I'm forwarding this 
to the list (with his permission).

A little background for those who aren't familiar with SVG gradients (: SVG has 
a less general concept of radial gradients than cairo. Rather than specifying 
radial gradients using two circles (an inner and an outer), you specify one 
circle and a "focal point". Using a focal point in SVG is equivalent to using a 
second (inner) circle with a radius of zero in cairo. The SVG specification 
additionally requires implementations to clamp the focal point to be within the 
circumference of the circle.

David Reveman wrote:
> For the pixman backend, X server backend and glitz backend the results
> are undefined when some part of the inner circle is outside the outer
> circle. In general cairo tries to expose as few cases as possible that
> can result in undefined results so cairo should be making sure that no
> values are passed to the backends that can give undefined results.
> However, cairo isn't currently doing this and it should of course be
> fixed.
> How do you want this clamping to work? 

If the implementation clamps, then consumers can use this behavior to do 
something useful. One use case is where you want the edge of the two circles (or 
circle and focal point) to be touching, but the circles' center points are to be 
at some arbitrary angle to each other (not a right angle). With the correct 
clamping strategy, instead of doing the math to work out the exact center point 
coordinates to make the edges of the circles touch, the author can simply place 
the second circle's center point some way outside that first at some simple 
coordinates that provide the required angle. The implementation will then clamp 
towards the center point of the first thereby relieving the consumer of the need 
to do the math.

I think this would be most use to SVG authors who may be coming from an HTML 
background rather than a computer graphics background, and who may find the math 
to achieve what they want an inconvenience (if not a challenge).

As to your specific suggestions for implementation strategies:

> 1. Move inner circle center point within outer circle.
> 2. Reduce inner circle radius so it fits in the outer circle.

No, not this one, I think. This clamping strategy would only allow the useful 
behavior described above for "circles" with a radius of zero (i.e. a focal point).

> or
> 1. Make inner circle radius less or equal to the outer circle.
> 2. Move inner circle center point within the outer circle.

I think this is the more useful implementation, and so it's the one I prefer. In 
addition to allowing clamping of a second circle with a radius of zero (the 
author can specify zero explicitly if that's what they want), this strategy 
would also allow the useful clamping behavior to extend to second circles with 
non-zero radii.

 > I can put whatever you find most useful in cairo.

Much appreciated, thank you. :-)


More information about the cairo mailing list