It can take on one of three values, 'pad', 'reflect', or 'repeat'. This attribute controls what happens when the gradient reaches its end, but the object isn't filled yet. The only other one I want to mention here is the spreadMethod attribute. If the focal point isn't given at all, it's assumed to be at the same place as the center point.īoth linear and radial gradients also take a few other attributes to describe transformations they may undergo. If the focal point is moved outside the circle described earlier, it's impossible for the gradient to be rendered correctly, so the spot will be assumed to be within the edge of the circle. While the first point described where the edges of the gradient were, the focal point describes where its middle is. The second point is called the focal point and is defined by the fx and fy attributes. Setting these three attributes will allow you to move the gradient around and change its size, as shown in the second rect above. It requires a center point, designated by the cx and cy attributes, and a radius, r. The first of these defines a circle around which the gradient ends. The radial gradient is again defined by two points, which determine where its edges are. However, unlike linear gradients, it's a bit more complex. Like linear gradients, the node can take several attributes to describe its position and orientation. The stops used here are the same as before, but now the object will be red in the center, and in all directions gradually change to blue at the edge. Also, like with fill and stroke, you can specify a stop-opacity attribute to set the opacity at that position (again, in FF3 you can also use rgba values to do this). Duplicate values will use the stop that is assigned furthest down the XML tree. You can insert as many stop colors as you like to create a blend that's as beautiful or hideous as you need, but the offsets should always increase from 0% (or 0 if you want to drop the % sign) to 100% (or 1). For instance, this one tells the gradient to start at the color red, change to transparent-black in the middle, and end at the color blue.

The two methods have been intermixed for the purposes of this example. This can be assigned directly or through CSS. These nodes tell the gradient what color it should be at certain positions by specifying an offset attribute for the position, and a stop-color attribute. Inside the linear gradient are several nodes. Above is an example of a linear gradient being applied to a element.

Inkscape gradient fill