Set shape attribute
You can use the Set shape attribute action to animate any SVG attributes in your shape, depending on a predefined condition.
Currently, the following SVG attributes are supported: fill, stroke, stroke-width, and opacity.
Other SVG attributes can also be used, but they are not supported on the Avelon Tablet.
For the sake of clarity, only those SVG attributes that have already been defined for the corresponding element in the SVG code are displayed in the dropdown.
So if you want to set a specific attribute and cannot find it in the dropdown, make sure it is already initialized in the SVG code.
Fill
You can change the fill color of objects in dependence with a property value of data points. To do this, select the areas for which you want to change the fill color with the ID attribute (see ID attribute).
<path id="MyPath" d="M 60 150 q 20 -30 80 -63 L 130 150 Z"
stroke="red" stroke-width="1" fill="red" />
Add a new behavior rule. First, configure the property of the data point and the associated condition. Then, select the element whose fill color you want to change dynamically. In the Action Type dropdown, select the option Set shape attribute, then select fill from the Attribute dropdown, and choose the desired target color under Value.
Example
Condition |
|
|---|---|
Property |
<AlarmState> |
Function |
= |
Value |
1 |
Action |
|
|---|---|
Action Type |
Set shape attribute |
Attribute |
fill |
Value |
|
Stroke
You can animate the line color of individual elements.
Assign the ID attribute to the corresponding element (see ID attribute) and set both the stroke and stroke-width property in the SVG code.
If you want the stroke to be invisible by default, set stroke="none". Now select the ID of the element in the Element dropdown.
<rect id="MyRect" x="0" y="0" fill="grey"
stroke="none" stroke-width="4"
width="40" height="100" />
In the Action Type dropdown, select Set shape attribute, in the Attribute dropdown, select stroke, and choose the desired color under Value.
Line width
You can animate the line thickness of individual elements.
Assign the ID attribute to the corresponding element (see ID attribute) and configure at least the properties stroke and stroke-width in the SVG code.
Then select the ID of the element in the Element dropdown.
<rect id="MyRect" x="0" y="0" fill="grey"
stroke="black" stroke-width="1"
width="40" height="100" />
In the Action Type dropdown, select Set shape attribute, in the Attribute dropdown, select stroke-width, and enter the desired line width in pixels under Value.
Opacity
You can animate the opacity of individual elements. Assign the ID attribute to the corresponding element (see ID attribute) and select it in the Element dropdown.
<rect id="MyRect" x="0" y="0" fill="grey"
opacity="0.25" width="39" height="119" />
In the Action Type dropdown, select the Set shape attribute option, in the Attribute dropdown, select fill, and enter the desired opacity as a decimal number between 0 and 1 under Value, where 1 is fully opaque, 0 is fully transparent, and 0.5 is semi-transparent.
Apply shape attribute to all elements in a group
You can also set an SVG attribute on a group element <g> instead of on a single graphical element.
In this case, the system will automatically apply the same value to the attribute of all child elements in this group if the condition applies.
However, you should only use this option in specific cases, for example, if a group contains many similar graphic elements whose properties are to be animated.
As a general rule, it is recommended that you create a separate action for each SVG element you want to animate.