Shape-Attribut setzen

Mit der Aktion Shape-Attribut setzen können Sie beliebige SVG-Attribute in Ihrem Shape abhängig von einer vorgegebenen Bedingung animieren.

Zur Zeit werden die folgenden SVG-Attribute unterstützt: fill (Füllung), stroke (Kontur), stroke-width (Strichbreite) und opacity (Deckkraft). Es können auch andere SVG-Attribute verwendet werden, allerdings werden diese auf dem Avelon Tablet nicht unterstützt. Der Übersichtlichkeit halber werden nur jene SVG-Attribute in der Auswahlliste angezeigt, die im SVG-Code bereits auf dem entsprechenden Element definiert wurden. Falls Sie also ein bestimmtes Attribut setzen möchten und dieses in der Auswahlliste nicht finden, stellen Sie sicher, dass es bereits im SVG-Code initialisiert ist.

Füllung

Sie können die Füllfarbe von Objekten abhängig eines Eigenschaftswertes von Datenpunkten ändern. Markieren Sie dafür jene Flächen, bei welchen Sie die Füllfarbe ändern möchten, mit dem ID-Attribut (siehe ID-Attribut).

<path id="MyPath" d="M 60 150 q 20 -30 80 -63 L 130 150 Z"
      stroke="red" stroke-width="1" fill="red" />

Fügen Sie eine neue Verhaltensregel hinzu. Konfigurieren Sie zuerst die Eigenschaft des Datenpunkts sowie die damit verknüpfte Bedingung. Wählen Sie anschließend das Element aus, dessen Füllfarbe Sie dynamisch ändern möchten. Wählen Sie in der Auswahlliste Aktionstype die Option Shape-Attribut setzen aus, dann in der Auswahlliste Attribut die Option fill, und wählen Sie anschließend in der Spalte Wert die gewünschte Zielfarbe aus.

Beispiel

Bedingung
Eigenschaft	<AlarmState>
Funktion	=
Wert	1

Aktion
Aktionstyp	Shape-Attribut setzen
Attribut	fill
Wert	#FF0000 (rot)

Kontur

Sie können die Linienfarbe einzelner Elemente animieren. Versehen Sie das entsprechende Element mit dem ID-Attribut (siehe ID-Attribut) und setzen Sie im SVG-Code die Eigenschaften stroke und stroke-width. Wenn die Linie standardmäßig unsichtbar sein soll, setzen Sie stroke="none". Wählen Sie anschließend die ID des Elements in der Auswahlliste Element aus.

<rect id="MyRect" x="0" y="0" fill="grey"
      stroke="none" stroke-width="4"
      width="40" height="100" />

Wählen Sie in der Auswahlliste Aktionstyp die Option Shape-Attribut setzen und in der Auswahlliste Attribut die Option stroke aus, und wählen Sie unter Wert die gewünschte Farbe aus.

Strichbreite

Sie können die Liniendicke einzelner Elemente animieren. Versehen Sie das entsprechende Element mit dem ID-Attribut (siehe ID-Attribut) und konfigurieren Sie im SVG-Code mindestens die Eigenschaften stroke und stroke-width. Wählen Sie anschließend die ID des Elements in der Auswahlliste Element aus.

<rect id="MyRect" x="0" y="0" fill="grey"
      stroke="black" stroke-width="1"
      width="40" height="100" />

Wählen Sie in der Auswahlliste Aktionstyp die Option Shape-Attribut setzen und in der Auswahlliste Attribut die Option stroke-width aus und geben Sie unter Wert die gewünschte Strichstärke in Pixel ein.

Deckkraft

Sie können die Deckkraft einzelner Elemente animieren. Versehen Sie das entsprechende Element mit dem ID-Attribut (siehe ID-Attribut) und wählen Sie dieses in der Auswahlliste Element aus.

<rect id="MyRect" x="0" y="0" fill="grey"
      opacity="0.25" width="39" height="119" />

Wählen Sie in der Auswahlliste Aktionstype die Option Shape-Attribut setzen und in der Auswahlliste Attribut die Option opacity aus und geben Sie in der Spalte Zielwert die gewünschte Deckkraft als Dezimalzahl zwischen 0 und 1 ein, wobei 1 für volle Deckkraft, 0 für komplett transparent, und 0.5 für halbtransparent steht.

Shape-Attribut auf alle Element in einer Gruppe anwenden

Sie können ein SVG-Attribut via Verhaltensregel auch auf einem Gruppenelement <g> setzen, statt auf einem einzelnen grafischen Element. In diesem Fall wird dieses Attribut automatisch auf allen untergeordneten Elemente in dieser Gruppe angewendet, wenn die Bedingung zutrifft. Verwenden Sie diese Möglichkeit allerdings nur in Ausnahmefällen, wenn eine Gruppe beispielsweise viele ähnliche Grafikelemente enthält, deren Eigenschaften animiert werden sollen. In der Regel empfiehlt es sich, für jedes zu animierende SVG-Element eineseparate Aktion zu erstellen.