The fill attribute becomes a special attribute only in case it's defined as an object, instead of the usual SVG syntax (e.g. "#ffaabb"). If it's defined as an object, it is assumed to be a gradient definition and must have the following form:

{
    type: <type of gradient>,
    stops: <stop colors>,
    attrs: <additional attributes>
}

Where type is either 'linearGradient' or 'radialGradient', attrs is an object containing additional SVG attributes for the SVG gradient element and stops is an array of the ramps of color on the gradient. Each stop object is of the form:

{
    offset: <offset>,
    color: <color>,
    opacity: <opacity>
}

Where offset is a string representing the offset of the gradient stop, color indicates what color to use at that gradient stop and opacity is a number in the [0..1] range representing the transparency of the stop color. Example use:

element.attr('rect/fill', {
    type: 'linearGradient',
    stops: [
        { offset: '0%', color: '#E67E22' },
        { offset: '20%', color: '#D35400' },
        { offset: '40%', color: '#E74C3C' },
        { offset: '60%', color: '#C0392B' },
        { offset: '80%', color: '#F39C12' }
    ]
});

For an introduction to gradients, please refer to the tutorial on Filters and Gradients.