drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

9.11. Animate gradients

This task animates linear and radial gradient style elements.

This task create or edit animate and animateTransform . The task is enabled if one object is selected with a gradient applied as a fill or stroke property.

Task icon

Image task-anim-gradient.svg

This feature can be used :

  • To animate an attribute of the stroke or fill gradient of an object with the animate dialog:

    1. Select the object then click on the task icon
    2. Choose from the selection dialog the element to animate: the gradient element or one of its stop elements
    3. Then click on the animate button

  • To animate transform the stroke or fill gradient of an object with the animate transform dialog:

    1. Select the object then click on the task icon
    2. Choose from the selection dialog the gradient to animate
    3. Then click on the animate transform button

  • To edit (begin, end, remove) an animation applied to the stroke or fill gradient of an object:

    1. Select the object then click on the task icon
    2. Choose from the selection dialog the animation to edit (begin, end, remove)
    3. Then click on the edit (begin, end, remove) button

See animate gradients showcase for an interactive demonstration.

The animate gradient selection dialog box

The context of the task consists of the gradients applied to the selected object, their stopping elements and the animations applied to all these elements.

The task's selection dialog box show context elements and actions that can be performed (animate, transform, modify, start, finish, delete) on them:

Image anim-gradient-select-dialog.png

The dialog box show the selected element details.

Next: 9.12. Animate patterns
Contents: DrawSVG user's guide
Previous: 9.10. Set attribute