std.svg.anim

SMIL-Animationen in SVG: einfache Attributanimationen (<animate>), Transformationsanimationen (<animateTransform>), Farbübergänge (<animateColor>) und Bewegung entlang eines Pfads (<animateMotion>). Keyframe-Animationen mit values und keyTimes.

→ std.svg · std.svg.elements · std.svg.path

Verwendung

import std.svg.anim;

// Einfache Attributanimation: Kreis pulsiert
SvgCircle(svg, 200.0, 200.0, 50.0, "fill:red");
SvgAnimateBegin(svg);
SvgAnimate(svg, "r", "50", "80", "1s", "indefinite", "0s");
SvgAnimateEnd(svg);

// Rotationsanimation (animateTransform)
SvgRect(svg, 150.0, 150.0, 100.0, 100.0, "fill:blue");
SvgAnimateTransform(svg, "rotate", "0 200 200", "360 200 200", "2s", "indefinite");

// Bewegung entlang Pfad
SvgCircle(svg, 0.0, 0.0, 10.0, "fill:orange");
SvgAnimateMotion(svg, "M 100 200 C 200 100 300 300 400 200", "3s", "indefinite");

// Keyframe-Animation: Opazität 0→1→0
var values: pchar := "0;1;0";
var keyTimes: pchar := "0;0.5;1";
SvgAnimateKeyframes(svg, "opacity", values, keyTimes, "2s", "indefinite");

// Farbanimation
SvgCircle(svg, 400.0, 300.0, 60.0, "fill:green");
SvgAnimateColor(svg, "fill", "green", "yellow", "1.5s", "indefinite", "0s");

// begin/end-Synchronisation: startet nach Klick
SvgAnimate(svg, "opacity", "1", "0", "0.5s", "1", "click");

// Mehrere Animationen auf dasselbe Element
SvgRect(svg, 50.0, 50.0, 80.0, 80.0, "fill:purple");
SvgAnimateBegin(svg);
SvgAnimate(svg, "x", "50", "300", "3s", "indefinite", "0s");
SvgAnimateEnd(svg);
SvgAnimateBegin(svg);
SvgAnimate(svg, "fill", "purple", "crimson", "3s", "indefinite", "0s");
SvgAnimateEnd(svg);

Funktionen

Signatur Sichtbarkeit Beschreibung
SvgAnimateBegin(svg: Svg): void pub Öffnet Animations-Element (wird an letztes SVG-Element gehängt)
SvgAnimateEnd(svg: Svg): void pub Schließt laufendes Animations-Element
SvgAnimate(svg: Svg, attr: pchar, from: pchar, to: pchar, dur: pchar, repeatCount: pchar, begin: pchar): void pub Fügt <animate> für ein Attribut ein
SvgAnimateTransform(svg: Svg, type_: pchar, from: pchar, to: pchar, dur: pchar, repeatCount: pchar): void pub Fügt <animateTransform> ein (rotate, scale, translate, skewX, skewY)
SvgAnimateMotion(svg: Svg, path: pchar, dur: pchar, repeatCount: pchar): void pub Bewegt Element entlang SVG-Pfad (<animateMotion>)
SvgAnimateColor(svg: Svg, attr: pchar, from: pchar, to: pchar, dur: pchar, repeatCount: pchar, begin: pchar): void pub Fügt <animateColor> für Farb-Attribut ein
SvgAnimateKeyframes(svg: Svg, attr: pchar, values: pchar, keyTimes: pchar, dur: pchar, repeatCount: pchar): void pub Keyframe-Animation mit Semikolon-getrennten Werten
SvgAnimateSet(svg: Svg, attr: pchar, to: pchar, begin: pchar, dur: pchar): void pub Setzt Attribut nach begin auf to für Dauer dur (<set>)

Letzte Aktualisierung: 2026-05-23