drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

9.12. Animate patterns

This task animates pattern style elements.

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

Task icon

Image task-anim-pattern.svg

This feature can be used :

  • To animate an attribute of the stroke or fill pattern 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 pattern element or one of its stop elements
    3. Then click on the animate button

  • To animate transform the stroke or fill pattern 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 pattern to animate
    3. Then click on the animate transform button

  • To edit (begin, end, remove) an animation applied to the stroke or fill pattern 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 patterns showcase for an interactive demonstration.

The animate pattern selection dialog box

The context of the task consists of the patterns applied to the selected object, their content 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-pattern-select-dialog.png

In the example the pattern consists of two path elements which can also be animated. The dialog box show the selected element details.

Next: Chapter 10. Options
Contents: DrawSVG user's guide
Previous: 9.11. Animate gradients