This stream has long been dead, I understand. But I am posting this answer in the hope that it will be useful to someone in the future. If you can extend the equations to the correct SVG markup, we did it. I developed this specific solution for cocoa, but the math is completely appropriate.
The approach includes a small mathematical matrix to find the gradient vector of the triangle, which gives the direction (x, y) of the steepest rise in z - this is the direction of the color gradient. The start / end points of the color gradient are determined by the intersection of the slope of the gradient vector (bounded by the origin of x, y) with iso-lines on the plane of the triangle describing zmin and zmax.
To begin with, the plane intersecting the three points {p1, p2, p3} triangle can be described by the equation:
A1(x) + A2(y) + A3(z) - A = 0
where A is the determinant:
|p1x p1y p1z| A = |p2x p2y p2z| |p3x p3y p3z|
and Ai is the same determinant, but replace column i column vector:
1 |p1x 1 p1z| column(i) = 1 eg, A2 = |p2x 1 p2z| 1 |p3x 1 p3z|
The gradient vector grad(z) describes the direction of the steepest rise, which is also the path of the color gradient:
grad(z) = [-A1/A3 (i), -A2/A3 (j)]
therefore, in the x, y plane, this gradient vector lies along the line:
y = x * A2/A1 + b,
where b can be anything, but let set b = 0 . this limits the color gradient path of the line crossing the origin:
y = x * A2/A1 [eqn 1]
This line describes the direction of the color gradient. The starting and ending points will be determined by the intersection of this line with zmax and zmin iso-lines.
now for any defined values of zmax and zmin we can describe parallel lines on the plane defined by our triangle, thus:
A1(x) + A2(y) + A3(zmax) - A = 0 [eqn 2] and A1(x) + A2(y) + A3(zmin) - A = 0 [eqn 3]
Using equations 1-3 above, we can solve for G1 and G2 start and end points of the color gradient, respectively.
G1 = (xmin,ymin) G2 = (xmax,ymax)
Where
xmin = (A - A3*zmin) / (A1 + A2^2 / A1) ymin = xmin * A2/A1 xmax = (A - A3*zmax) / (A1 + A2^2 / A1) ymax = xmax * A2/A1
Pay attention to the special case when A1 = 0 , which corresponds to the perfectly vertical path of the color gradient. In this case:
for A1 == 0: G1 = (0,ymin) G2 = (0,ymax), where ymin = (A - A3*zmin) / A2 ymax = (A - A3*zmax) / A2
The only special case is when p1z = p2z = p3z . This will try to stretch the gradient path indefinitely. In this special case, the triangle should simply be painted solidly, and not go through all the math.
All that remains is to set the triangle as the clipping region and draw a gradient from G1 to G2 . I include a problem area diagram with corresponding linear equations. Note also that the color gradient varies linearly along each edge of the triangle, so the question of the question of triangulating the triangle is right on target. I developed this approach for this very reason - to paint the faces of a triangulated mesh. The figure below shows the case when zmax == p3z > p1z > p2z > zmin .
