"<linearGradient>"

Defines the paint server for a linear gradients.

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

These elements are typically placed within a <defs> element, and then referenced by id from a fill or stroke attribute.

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

To reference it with a fill:

<rect fill="url(#MyGradient)" width="300" height="300" />

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" />