Appendix B. Elements, Attributes, and Style Properties

This guide to SVG paint server elements provides a quick reference to the available attributes, with their default and allowed values.

<linearGradient>

A gradient in which color stops are drawn as parallel lines, extending perpendicularly (in the gradient’s coordinate system) from a gradient vector.

id

the value used to reference this gradient

  • same restrictions as for any other element id

x1

horizontal position of the gradient vector’s start point

  • a length (in user coordinates or with units) or percentage (of coordinate system width)

  • default 0.

y1

vertical position of the gradient vector’s start point

  • a length (in user coordinates or with units) or percentage (of coordinate system height)

  • default 0.

x2

horizontal position of the gradient vector’s end point

  • a length (in user coordinates or with units) or percentage (of coordinate system width)

  • default 100%.

y2

vertical position of the gradient vector’s end point

  • a length (in user coordinates or with units) or percentage (of coordinate system height)

  • default 0.

gradientUnits

the coordinate system to use

  • either userSpaceOnUse or objectBoundingBox

  • default objectBoundingBox

gradientTransform

transformations to apply to the gradient content, independent of the shape it fills

  • a list of whitespace-separated transformation functions: translate(tx,ty), scale(s), scale(sx,sy), rotate(a), rotate(a,cx,cy), skewX(a), and skewY(a)

Get SVG Colors, Patterns & Gradients now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.