drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

9.10. Set attribute

The set command assign a value to an attribute of a target element for a specified duration without transition. It is a restriction of the animate command:

Use this command to fix the state of an element during animations.

This task create or edit set element. The task is enabled if one object is selected to animate it, or if the document contains set elements.

The context of the task can be relative to the selection or to the document.

Task icon

Image task-anim-set.svg

This feature can be used :

  • To set an attribute of the selected object that does not have yet one with the set dialog.

    Select the object then click on the task icon.

  • To view the set elements of the selection, then editing one or adding another one to the target of the selected animation with the set elements dialog.

    Select the objects then click on the task icon.

  • To view all set elements of the document, then editing one or adding another one to the target of the selected animation with the set elements dialog.

    Click on the task icon if enabled.

See set attributes showcase for an interactive demonstration.

The set command dialog

Create a set element or update one.

The dialog is composed of an active pane, a pane links area and a bar of actions buttons.

Image set-dialog.png

This dialog is an assistant to create or edit a set element

  • To easily create a set element:

    start by setting only the required properties ( attribute, id, duration, begin, to)

    then edit the set element and define the other properties ( repeat count, repeat duration, fill, end, min, max, restart).

  • Use the next link and button to open the next property pane, or click on its link.

  • Each property pane explains its property's behavior with links to standard specifications, and presents a simple and intuitive user interface for entering the property's value.

  • By default start the created set element or restart the updated one.

The attribute property

Define the attribute to set, enter or select it from the DOM list or style properties list.

Image animate-attribute-pane.png

See specifications.

The to property

Specifies the value for the attribute during the duration of the set element.

The value is input with its required format (color, length, opacity, number..) using a dedicated UI.

Image set-to-pane.png

See syntax specification to.

The set elements dialog

The set attribute task show this dialog when:

  • the selection is empty and the document contains set elements.

  • the selected objects have set elements.

Image set-target-dialog.png

The dialog shows:

  • The list of the set elements identified by their id.

  • A panel with the description of the selected set element.

The selected set element can be started, stopped and edited.

Use the add button to create another set element on the target element of the selected one.