Element Tree

Animator

The Element Tree

When an SVG image has been loaded into the Inovista Animator, a tree structure of the element contained within the image is presented in the editor panel on the left hand side of the Animator below the 'Load Image' section.

If the element is a container type, for example the image itself or a group, clicking on the arrow icon will drill down to its child elements. Clicking on one of the elements in the tree(including the initial element which is the whole SVG image) will show the 'edit -->' option.

Element Tree

Element Tree with Selection

Clicking on the edit option will select that element and place it in the 'Node' dropdown in the 'Transitions' section. At this point, a new transition can be created for the element by clicking on the '+' sign to its right.

Element Initialization

An icon will be displayed to the left of the element. For parent elements(whole image or group) the icon will be eye or for a child element(e.g. a path or text) the icon will be editopen . These icons can be used to set the initial state of the element. For the parent elements, the only option available is 'visible' or 'invisible'. Click the icon to hide the element and click it again to show it.

For the child elements, a dialog popup will appear with a range of initialization options. Click the 'Apply' button at the bottom to save any changes. The 'Reset' button will revert the element to its initial value.

The available options are as follows:

Hide: Select the checkbox to hide the image, deselect to show.
Fill Color: The fill color sets the color inside the element. To set the fill color, use the color button to open a color dialog editor or enter the color in hex format i.e. '#ff0000'.
Fill Opacity: The opacity(transparency) of the inside of the element. '1' is completely visible and '0' is invisible. Values between i.e. '0.5' will set the level of transparency.
Stroke Color: A stroke is the border of the element. To set the border color, use the color button to open a color dialog editor or enter the color in hex format i.e. '#ff0000'.
Stroke Width: This is the width of the stroke(border) in pixels.
Stroke Opacity: The opacity(transparency) of the border. '1' is completely visible and '0' is invisible. Values between i.e. '0.5' will set the level of transparency.
Dash Array: defines the pattern of dashes and gaps used to paint the outline of the element. For example, '4' alone will set a dashed border with each dash 4 pixels long and a gap of 4 pixels between them. '4 1' will be the same except the gap will be only 1 pixel.
Dash Offset: defines the number of empty pixels before the border begins. A value of '10' will mean the first 10 pixels are empty.

The Path Length is purely an indicator of the length of the border of the element. This can be used in conjunction with the Dash options to create border animations. When the element is a text item, the path length is not available although the dash array will still work. Try estimating the length with a little trial and error.

Please note that elements that use gradients or patterns are not currently supported. A work around for this is to edit the SVG file in an editor and convert the gradient or pattern to a fill type.