Using the SVG defs Element

---

Rendering Rectangles with Linear Gradients

The rectangle displayed in Figure 2.1 is rendered with linear gradient shading.

Figure 2.1: A linear gradient rectangle.

In this example, the SVG rect element defines a rectangle of width width and height height whose upper-left vertex has coordinates (x,y).

The SVG document in Listing 2.2 demonstrates how to draw a rectangle with linear gradient by means of the SVG elements rect and linearGradient.

Listing 2.2 rectLinearGradient1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%">   <defs>   <linearGradient       gradientUnits="userSpaceOnUse">      <stop stop-color="yellow" offset="0%"/>      <stop stop-color="black"  offset="100%"/>   </linearGradient>   </defs>   <rect      x="60" y="60" width="400" height="200"      stroke-width="4"      stroke="red"      stroke-dasharray="2 2 2 2"      fill="black"/>   <rect      x="50" y="50" width="400" height="200"      stroke-width="4"      stroke="red"      stroke-dasharray="2 2 2 2"      fill="url(#gradientDefinition)"/> </svg>

Remarks

Listing 2.2 contains two SVG rect elements, both of which have a width of 400 pixels and height of 200 pixels; the first rectangle is black and is shifted to the right and downward by 10 pixels in order to create a shadow effect. The upper-left vertex of the second rectangle has coordinates (50,50).

The color of the second rectangle references the id element (defined in the SVG defs element) whose value is gradientDefinition, which is a linear color gradient that ranges from yellow to black from left to right. The combination of the value for the stroke-dasharray attribute and the stroke attribute create a red perforated effect for the second rectangle.

You can also specify the stop-opacity attribute inside a stop attribute. The default value for stop-opacity is 1, and its allowable set of values are the numbers between 0 and 1. An example is given below:

<stop stop-color="yellow" stop-opacity=".2" offset="100%"/>

---