O'Reilly logo

SVG Colors, Patterns & Gradients by Kurt Cagle, Amelia Bellamy-Royds

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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)

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required