[cairo] Re: cairo gradients
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
> 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).
> 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
> I can put whatever you find most useful in cairo.
Much appreciated, thank you. :-)
More information about the cairo