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.