svg paths filling

8.2 Gradients

8.2.1 Linear gradients

A linear gradient is a transition through a series of colors along a straight line. You specify the colors you want at specific locations, called gradient-stop.

The stops are part of the structure of the gradient;
the colors are part of the presentation.

Example 1 Two-color gradient from gold → cyan.

 <svg width="200" height="140" viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="two_hues">
            <stop offset="0%" style="stop-color:#ffcc00;"/>
            <stop offset="100%" style="stop-color:#0099cc;"/>
        </linearGradient>
    </defs>
    <rect x="20" y="20" width="200" height="100" style="fill:url(#two_hues); stroke:black"/>
</svg>

8.2.1.1 The `stop` element

The stop element has two attributes:

offset - a point along the line at which color should be equal to the stop-color
It can be given as a percentage from 0% to 100% or as a decimal value from 0.0 to 1.0
stop-color

Example 2. Three-color gradient gold → reddish-purlpe → light cyan.

 <svg width="200" height="140" viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svgquot;>
    <defs>
        <linearGradient id="three_stops">
            <stop offset="0%" style="stop-color:#ffcc00;"/>
            <stop offset="33%" style="stop-color:#cc6699;"/>
            <stop offset="100%" style="stop-color:#66cc99;"/>
        </linearGradient>
    </defs>
    <rect x="20" y="20" width="200" height="100" style="fill:url(#three_stops); stroke:black"/>
</svg>

8.2.1.2 Establishing a transition line for a linear gradient

The default behavior of a linear gradient is to transition along a horizontal line from the left side of an object to its right side. If you want the transition of colors to occur across a vertical line or a line at an angle, you must specify the line's starting point with the x1 and y1 attributes and its ending points with the x2 and y2 attributes.

Rather than duplicate the stops into each linearGradient element, we'll use the xlink:href attribute to refer to the original left-to-right gradient. The stops will be inherited, but the x- and y-coordinates will be overriden by each individual gradient.

Example 3. Defining vectors [(x1,y1), (x2,y2)] for a linear gradient direction

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
     <linearGradient id="left_to_right" xlink:href="#three_stops"
     x1="100%" y1="0%" x2="0%" y2="0%"/>
     <linearGradient id="right_to_left" xlink:href="#three_stops"
     x1="0%" y1="0%" x2="100%" y2="0%"/>
     <linearGradient id=";down" xlink:href="#three_stops"
     x1="0%" y1="0%" x2="0%" y2="100%"/>
     <linearGradient id="up" xlink:href="#three_stops"
     x1="0%" y1="100%" x2="0%" y2="0%"/>
    <linearGradient id="diagonal_down" xlink:href="#three_stops"
     x1="0%" y1="0%" x2="100%" y2="100%"/>
     <linearGradient id="diagonal_up" xlink:href="#three_stops"
     x1="100%" y1="100%" x2="0%" y2="0%"/>
   </defs>
    <rect x="10" y="10" width="80" height="50" style="fill:url(#left_to_right); stroke:black"/>
    <rect x="110" y="10" width="80" height="50" style="fill:url(#right_to_left); stroke:black"/>
    <rect x="10" y="70" width="80" height="50" style="fill:url(#down); stroke:black"/>
    <rect x="110" y="70" width="80" height="50" style="fill:url(#up); stroke:black"/>
    <rect x="10" y="130" width="80" height="50" style="fill:url(#diagonal_down); stroke:black"/>
    <rect x="110" y="130" width="80" height="50" style="fill:url(#diagonal_up); stroke:black"/>
</svg>

8.2.1.3 The `spreadMethod` attribute

The transition line does not have to go from one corner of an object to another. What happens if you say that the transition line goes from (20%, 30%) to (40%, 80%)? What happens to the part of the object outside that line? You can set the spreadMethod attribute to one of these values:

pad
The beginning and ending stop colors will be extended to the edges of the object.
repeat
The gradient will be repeated start-to-end until it reaches the edges of the object being filled.
reflect
The gradient will be reflected end-to-start, start-to-end until it reaches the edges of the object being filled.

Example 4. Effects of spreadMethod values on a linear gradient

<svg width="200" height="340" viewBox="0 0 200 340" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="partial"
          x1="20%" y1="30%" x2="40%" y2="80%">
          <stop offset="0%" style="stop-color:#ffcc00;"/>
          <stop offset="33.3%" style="stop-color:#cc6699;"/>
          <stop offset="100%" style="stop-color:#66cc99;"/>
      </linearGradient>

      <linearGradient id="pad_spread_method" xlink:href="#partial" spreadMethod="pad"/>

      <linearGradient id="repeat_spread_method" xlink:href="#partial" spreadMethod="repeat"/>

      <linearGradient id="reflect_spread_method" xlink:href="#partial" spreadMethod="reflect"/>

      <line id="show_line" x1="20" y1="30" x2="40" y2="90" style="stroke:white;"/>
   </defs>
    <rect x="10" y="10" width="180" height="100" style="fill:url(#pad_spread_method); stroke:black"/>
    <use xlink:href="url(#show-line)" transform="translate(10,10)"/>
    <rect x="10" y="120" width="180" height="100" style="fill:url(#repeat_spread_method); stroke:black"/>
    <use xlink:href="url(#show-line)" transform="translate(10,100)"/>
    <rect x="10" y="230" width="180" height="100" style="fill:url(#reflect_spread_method); stroke:black"/>
    <use xlink:href="url(#show-line)" transform="translate(10,230)"/>
</svg>

8.2.2 Radial gradient

The other type of gradient you can use is the radial gradient, where the color transition occurs along a circular path. It's set up in much the same way as a linear gradient.
If the bounding box of the object being filled is not square, the transition path will become elliptical to match the aspect ratio of the bounding box.

Example 5. radialGradient

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" >
      <defs>
    <radialGradient id="radial_three_stops">
       <stop offset="0%" style="stop-color:#f96;"/>
       <stop offset="50%" style="stop-color:#9c9;"/>
       <stop offset="100%" style="stop-color:#906;"/>
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="80" height="80" style="fill:url(#radial_three_stops); stroke:black"/>
  <ellipse cx="150" cy="50" rx="40" ry="30" style="fill:url(#radial_three_stops); stroke:black"/>
</svg>

8.2.2.1 Establishing transition limits for a radial gradient

Instead of using a line to determine where the 0% and 100% stop points should be, a radial gradient's limits are determined by a circle; the center is the 0% stop point, and the outer circumference defines the 100% stop point. You define the outer circle with the cx (center x), cy (center y), and r (radius) attributes. All of these are in terms of percentages of the object's bounding box. The default values for all these attributes is 50%

Example 6. Center at origin and limits of a radial gradient

<defs>
    <radialGradient id="center_origin" cx="0" cy="0" r="100%">
       <stop offset="0%" style="stop-color:#f96;"/>
       <stop offset="50%" style="stop-color:#9c9;"/>
       <stop offset="100%" style="stop-color:#906;"/>
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="80" height="80" style="fill:url(#center_origin); stroke:black"/>
  <ellipse cx="150" cy="50" rx="40" ry="30" style="fill:url(#center_origin); stroke:black"/>
</svg>

Setting focal point for a radial gradient

Example 7. Focal point at (30%,30%)

    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" >
   <defs>
     <radialGradient id="center_set" cx="0" cy="0" fx="30%" r="100%">
         <stop offset="0%" style="stop-color:#f96;"/>
        <stop offset="50%" style="stop-color:#9c9;"/>
        <stop offset="100%" style="stop-color:#906;"/>
     </radialGradient>
   </defs>
   <rect x="10" y="10" width="80" height="80" style="fill:url(#center_set); stroke:black"/>
   <ellipse cx="150" cy="50" rx="40" ry="30" style="fill:url(#center_set); stroke:black"/>
 </svg>

The default values for the limit-setting attributes of a `radialGradient` are as follows

Attribute

Default value

cx

50% (horizontal center of object bounding box)

cy

50% (vertical center of object bounding box)

r

50% (half the width/height of object bounding box)

fx

same as cx

fy

same as cy

7.2.2.2 The `spreadMethod` attribute for radial gradients: `pad, repeat, reflectz`

Example 8. Effects of spreadMethod values on a radial gradient

    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" >
   <defs>
     <radialGradient id="center_set" cx="0" cy="0" fx="30%" r="100%">
         <stop offset="0%" style="stop-color:#f96;"/>
        <stop offset="50%" style="stop-color:#9c9;"/>
        <stop offset="100%" style="stop-color:#906;"/>
     </radialGradient>
   </defs>
   <rect x="10" y="10" width="80" height="80" style="fill:url(#center_set); stroke:black"/>
   <ellipse cx="150" cy="50" rx="40" ry="30" style="fill:url(#center_set); stroke:black"/>
 </svg>

Gradient Reference Summary

Linear and radial gradients describe a smooth transition of colors used to fill an object.
The object has a bounding box defined as the smallest rectangle that entirely contains the object
The <linearGradient> and <radialGradient> elements are both containers for a series of <stop> elements.
Each of these <stop> elements specifies a stop-color and an offset.
The offset defines the length of the color transition.
- For linear gradients, the offset is a percentage of the distance along the gradient's linear vector.
- For radial gradients, it is a percentage of the distance along the gradient's radius.
For a linear gradient,
- the starting point of the vector (which has the 0% stop color) is defined by the attributes x1 and y1;
- the ending point (which has the 100% stop color) by the attributes x2 and y2.
For a radial gradient, the focal point (which has the 0% stop color) is defined by the attributes fx and fy; the circle that has the 100% stop color is defined by its center coordinates cx and cy and its radius r
If the gradientUnits attribute has the value objectBoundingBox, the coordinates are taken as a percentage of bounding box's dimensions (this is the default). If the value is set to userSpaceOnuse, the coordinates are taken to be in the coordinate system used by the object that is being filled.
If the vector for a linear gradient or the circle for a radial gradient does not reach to the boundaries of the object being filled, the remaining space will be colored as determined by the value of the spreadMethod attribute:
- pad (the default), extends the start and end colors to the boundaries;
- repeat repeats the gradient start-to-end until it reaches the boundaries;
- reflect replicates the gradient end-to-start and start-to-end until it reaches the object boundaries.