Defines the paint server for a linear gradients.

DOM object: SVGLinearGradientElement
SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#LinearGradients

A <linearGradient> is a paint server: it does not draw anything on its own, but describes a color ramp that other shapes can use as their fill or stroke. The ramp interpolates smoothly between a list of "<stop>" child elements along a straight line from (x1, y1) to (x2, y2). At render time, every pixel of the filled shape is colored by projecting it onto that line and looking up the interpolated stop color at that position.

Gradients are almost always declared inside a "<defs>" block with an id, then referenced by that id from a paint attribute like fill="url(#MyGradient)". For a radial (circular) color ramp instead of a linear one, use "<radialGradient>".

<linearGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</linearGradient>

To reference it with a fill:

Valid child elements: "<stop>"

See also: "<radialGradient>", "<stop>"

Attribute	Default	Description
x1	0%	Start X coordinate.
y1	0%	Start Y coordinate.
x2	100%	End X coordinate.
y2	100%	End Y coordinate.
gradientUnits	objectBoundingBox	The coordinate system for the gradient, either userSpaceOnUse or objectBoundingBox.
gradientTransform	(none)	A transform to apply to the gradient.
spreadMethod	pad	How to handle colors outside the gradient. Either pad, reflect, or repeat.
href	(none)	A URL reference to a template gradient element, which is then used as a template for this gradient. Example: <linearGradient id="MyGradient" href="#MyGradient2" />