Chapter 7  Filling the shape

Extract

Colors in gradients or gradients stop elements

 This is the syntax for the ‘stop’ element :

 <stop id="name"
           offset="NumberOrPercentage"
            stop-color="Color"
            stop-opacity="Opacity-value" /> 

Diagram 7-1. Chart for 'stop' syntax

( view this chart as svg )

Values for offset are from 0% to 100% or from 0 to 1. For each stop element, offset must be equal to or greater than the previous stop's offset value.
Gradient offset values less than 0 (or less than 0%) are rounded up to 0%. Gradient offset values greater than 1 (or greater than 100%) are rounded down to 100%.

 How understand offset attribute ?

 To begin, we create linear gradient with two colors only. Colors are defined in stop elements.

 <defs>
   <linearGradient id="MyGradient">
        <stop offset="30%" stop-color="red"/>
        <stop offset="70%" stop-color="yellow"/>
   </linearGradient>
</defs>

We create also radial gradient with same 'stop' elements :

<defs>
   <radialGradient id="MyGradient">
        <stop offset="30%" stop-color="red"/>
        <stop offset="70%" stop-color="yellow"/>
   </linearGradient>
</defs>

For linear gradients, the offset attribute represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
We can see result in Figure 7-3.

Figure 7-3. How work offset for stop element

( view this picture as svg )

In linear gradient, to fill shape, red is used from begin to 30% of total length, yellow is used from 70% to end.
From 30% to 70%, color goes smoothly from red to yellow.
We go from red ( rgb(255,0,0) ) to yellow ( rgb(255,255,0) ), so colors at x% of gradient vector is rgb(255,y,0)
with y = 255 * (x – 30 ) / 40.

For radial gradient 'offset' apply to radius of circles ( we can choose center of circles see after )
To fill shape, red is used for circle with radius of 30% of area's radius , yellow is used from 70% to end.
From 30% to 70%, color goes smoothly from red to yellow.

Figure 7-4 show some values for offset in linear gradient. For 0 and 100, all rectangle is filled with continuously smooth color transitions from red to yellow. For 50 and 50, we get only red for left part and yellow for right part.

Figure 7-4.  Some values for offset in linearGradient element

( view this picture as svg ) 

We get this effects with radial gradient in Figure 7-5 for different values of offset attributes.

Figure 7-5.  Some values for offset in radialGradient element

  ( view this picture as svg )