Translation
You can use the offset or translation behavior to move elements in your shape, depending on the value of a data point.
The origin for the offset is the upper left corner of the element concerned.
To offset several elements together, enclose them with a <g> element.
If necessary, use a translation transformation to move the origin.
In the Value field, you can configure the offset parameters according to the following format:
\(D_1\) and \(D_2\) represent the definition range, i.e. the lowest and highest possible value which the data point can assume, while \(V_1\) and \(V_2\) define the value range, i.e. the minimum and maximum offset in pixels.
Both a horizontal offset (Translate X) and a vertical offset (Translate Y) are available as possible actions. Use two separate actions to combine both types of offset.
Example
In the following example, the red rectangle with the white arrow is moved from the center so that it touches the left edge of the gray rectangle when the measurement value is 0 and the right edge when the measurement value is 100.
Translate X was selected as the Action Type and [0,100],[-25,25] was used as the Value.
This means that with a measurement value of 0, the offset is also 0 pixels. With a measurement value of 100, it is 40 pixels. Accordingly, the element is offset by 8 pixels with a measurement value of 20.
<rect x="0" y="0" fill="whitesmoke" stroke="darkgray" width="100" height="100" />
<g id="Target" transform="translate(50,50)">
<g transform="translate(-25,-25)">
<rect fill="red" stroke="crimson" width="50" height="50" />
<polygon points="10,10 40,25 10,40" fill="white" />
</g>
</g>
|
Measurement value: 25 → Offset: -12.5 pixels (from the center) |
|
Measurement value: 100 → Offset: 25 pixels (from the center) |
Simulator
Once you have activated simulator with Start Simulator, you can test the scaling animation by entering any value within the definition range in the Test Value column.