Designing SVG Web Graphics

More Complex Animations

So far, the simple syntax you have looked at produces linear changes in an attribute smoothly over the duration of the animation. SVG, however, provides alternative methods to add other nonlinear or noninterpolated animations.

First, compare linear and discrete modes on a color animation. The top rectangle shown in Figure 08.01 changes slowly in color from white to yellow over 16 seconds. The lower rectangle stays white until the 16 seconds have passed and then changes step-wise from white to yellow. The discrete calcMode is needed particularly in situations where no interpolated values exist—for example, when you are changing the visibility attribute from visible to hidden or vice versa. Interpolation values exist for ...