Gradients and Animation

Gradients

  • Gradients and patterns are defined as separate elements within SVG code.
  • Never drawn directly.
  • Similar to webserver serving images,gradient or pattern known as paintserver.
  • defined within <defs>
  • <radialGradient>
    • contains fx and fy attributes off center effect
  • <linearGradient>
    • spreadMethod
    • gradientTransform attributes to control angle, scale and repetition

More details Chapter 12.
 

 

 

Activating Animation

  • CSS animation has best browser support yet not full replacement for SVG/SMIL animation.
  • Directly animate fill only works well with solid colors. If value is url, browsers get buggy.
  • As an alternative, each light receives two layers, one with an “on-gradient” and one with an “off-gradient”. Then animation is done on visibility of the layer (display can not be animated with css)
  • <style>element can be included anywhere but is best to keep befor or after the <defs> @ top of file.

More detais Chapter 19