Drehen, Kippen und Skalieren mit animateTransform

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Mit dem Tag <animateTransform> können Sie alle Einstellungen des transform-Attributs dynamisch ändern und so Elemente drehen, kippen und skalieren. Der Tag verfügt nur über ein zusätzliches Attribut, es sind jedoch außerdem einige Besonderheiten zu beachten.

Attribute und Besonderheiten

Zusätzlich zu den Universalattributen gibt es das Attribut type. Damit können Sie bestimmen, welche transform-Anweisung manipuliert werden soll. Dazu stehen die Werte translate, scale, rotate, skewX und skewY zur Verfügung.

Die Werte für die Attribute from, by und to müssen Werte enthalten, die den gleichen Typ wie die Werte des transform-Befehls haben. Dabei gelten folgende Regeln:

  • Für type="translate" müssen die Werte Kombinationen aus x/y-Koordinaten sein, wobei die Angabe des y-Wertes optional ist.
  • Für type="scale" müssen Sie prozentuale Werte zur Skalierung des Breite bzw. Höhe haben. Auch hier ist die Angabe des Wertes zur Skalierung der y-Achse optional.
  • Für type="rotate" geben Sie einen einzelnen Wert an, der bestimmt um wie viel Grad das Objekt gedreht werden soll.
  • Für type="skewX" und type="skewY" müssen Sie ebenfalls einzelne Werte angeben, die bestimmen, um wie viel Grad das Element auf der x- bzw. y-Achse gekippt werden soll.

Die gleichen Werte müssen auch in der values-Werteliste angegeben werden. Dabei werden Werte bzw. Wertepaare wieder durch Semikola getrennt.

Merkwürdige Verhaltensweisen des SVG-Viewers

Gerade bei diesem Tag weist der Adobe SVG-Viewer 2.0 einige Verhaltensweisen auf, die nicht standardkonform sind. Darauf müssen Sie achten, wenn Sie Code erstellen möchten, der auch im SVG-Viewer ausgeführt werden soll.

Neben dem Attribut type müssen Sie auch noch das Attribut attributeName="transform" angeben, damit die Animation ausgeführt wird. Eigentlich wäre das nicht notwendig, weil der Tagname animateTransform ja bereits sagt, dass das Attribut transform animiert werden soll. Vergessen Sie das Attribut, zeigt der SVG-Viewer lediglich den Endzustand der Animation an, aber die eigentliche Veränderung nicht. Dass dies nicht dem Standard entspricht, zeigt sich daran, dass auch die Beispiele der W3C-Dokumentation nicht funktionieren, da auch sie dieses Attribut nicht enthalten.

Ein weiteres Problem ist, dass bei mehreren Animationen für ein Element nicht immer alle ausgeführt werden. Wenn Sie bspw. auf einen Kreis, eine Ellipse oder einen Text zwei Animationen mit type="scale" und type="rotate" anwenden, wird lediglich die Skalierung ausgeführt. Die Drehung wird erst nach Abschluss der Skalierung in einem Rutsch durchgeführt.

Verwenden Sie im transform-Attribut eines Elements gleichzeitig den Befehl translate und einen anderen, wie bspw. scale, und passen Sie nur den Befehl scale in der Animation an, wird der translate-Befehl während der Animation ignoriert und das Element somit zum Nullpunkt des übergeordneten Koordinatensystems verschoben. Allerdings gibt es eine Lösung für das Problem. Sie können bspw. den zu animierenden Befehl direkt auf das Element anwenden, den translate-Befehl für die Positionierung aber auf eine übergeordnete Gruppe.

<g transform="translate(100 100)" id="gruppe1">
  <text transform="rotate(0)" id="text1" x="0" y="0" style="font-family:'Arial Black';font-size:40px;fill:blue;stroke:darkblue">SVG</text>
</g>

Auf diese Weise können Sie bspw. auch gleichzeitig das Element bewegen und drehen, indem Sie einfach eine Animation für den translate-Befehl für die Gruppe erstellen und eine weitere Animation für die Drehung, wie dies das folgende Listing zeigt.

Hinweis:
Das folgende Beispiel zeigt am ersten Textelement und der Gruppe gruppe1, dass zwei Animationen mit Hilfen von Gruppen gleichzeitig ausgeführt werden können, während die anderen beiden Elemente die oben dargestellte Problematik zeigen.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <defs>
    <animateTransform type="rotate" xlink:href="#text1" attributeName="transform" dur="6s" from="0" to="360" by="1" calcMode="linear" repeatCount="1000"/>
    <animateTransform type="translate" xlink:href="#gruppe1" attributeName="transform" dur="6s" from="100,100" to="300,300" by="1,1" calcMode="linear" repeatCount="1000"/>
  </defs>
  <g transform="translate(100 100)" id="gruppe1">
    <text transform="rotate(0)" id="text1" x="0" y="0" style="font-family:'Arial Black';font-size:40px;fill:blue;stroke:darkblue">SVG</text>
  </g>
  <g transform="translate(350,150)">
    <ellipse transform="rotate(10)" cx="0" cy="0" rx="20" ry="10" style="fill:blue">
      <animateTransform type="rotate" begin="0" from="1" to="30" by="1" dur="10s" attributeName="transform"/>
      <animateTransform type="scale" from="0.1" to="1" dur="10s" attributeName="transform"/>
    </ellipse>
  </g>
  <g transform="translate(100,100)">
    <text transform="rotate(1) scale(0.01)" id="text2" x="0" y="0"  style="font-family:'Arial Black';font-size:40px;fill:blue;stroke:darkblue">SVG
      <animateTransform type="scale" attributeName="transform" dur="6s" from="0.01" to="1" by="0.01" fill="freeze"/>
      <animateTransform type="rotate" attributeName="transform" dur="6s" from="1" to="360" by="1" fill="freeze"/>
    </text>
  </g>
</svg>


   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de