• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 6. Creating SVG Gradients > The <linearGradient> Element

The <linearGradient> Element

Linear gradients in SVG can be defined as horizontal gradients, vertical gradients, or diagonally at any angle between the horizontal and vertical. A horizontal gradient is created when the values of the y1 and y2 attributes of the <linearGradient> element are the same and the x1 and x2 attributes differ. A vertical gradient results when the x1 and x2 attributes or the <linearGradient> element are the same and the y1 and y2 attributes differ. A diagonal gradient results when both pairs of attributes differ.

A linear gradient can have two colors or many colors. Each color used in a gradient is specified using a <stop> element, which has stop-color and stop-opacity attributes. SVG also allows you to vary individually the opacity of the “stop colors” that are present within a linear gradient, allowing a large range of subtle visual effects to be achieved.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint