revision:
lets authors define linear gradients to apply to other SVG elements.
the <linearGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:1/ horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ; 2/ vertical gradients are created when x1 and x2 are equal and y1 and y2 differ; 3/ angular gradients are created when x1 and x2 differ and y1 and y2 differ
attributes: gradientUnits, gradientTransform, href, spreadMethod, x1, x2, xlink:href, y1, y2
codes:
<svg viewBox="0 0 10 6">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="blue" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient')" />
</svg>
lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
the <radialGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
attributes: cx, cy, fr, fx, fy, gradientUnits, gradientTransform, href, r, spreadMethod, xlink:href
codes:
<svg viewBox="0 0 10 7">
<defs>
<radialGradient id="myGradient_a">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient_a')" />
</svg>
defines a color and its position to use on a gradient. This element is always a child of a <linearGradient> or <radialGradient> element.
attributes: offset, stop-color, stop-opacity
codes:
<svg viewBox="0 0 10 7">
<defs>
<radialGradient id="myGradient_b">
<stop offset="10%" stop-color="green" />
<stop offset="95%" stop-color="blue" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient_b')" />
</svg>