stop
The gradient stop elements control the colors used in the gradient. This element has the following attributes:
| Attribute | Description |
|---|---|
offset
|
Ranges from 0 to 1, or from 0% to 100%—indicates where the gradient stop is placed. For linear gradients, it represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (cx cy) to the edge of the outermost or the largest circle. |
stop-color
|
Indicates what color to use at that gradient stop. |
stop-opacity
|
A number ranging from 0.0 to 1.0, where 0.0 is 100% transparent and 1.0 is 100% opaque. |
Example:
Copy
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 100 30">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
<!-- The rectangle is filled using a linear gradient paint server -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200" />
</svg>