SVG/Tutorials/SVG mit CSS animieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

IIn SVG können die Präsentationseigenschaften in Stylesheets ausgelagert und durch fast alle Selektoren wie Klassen und ids, aber auch durch Pseudoklassen wie :hover und :focus selektiert werden.

Hauptartikel: SVG/SVG und CSS

Anders als in der HTML-Welt gelten Koordinaten und Größenabmessungen aber noch nicht als Präsentationseigenschaften (→ Übersicht). Alle anderen Eigenschaften können aber mit den CSS-Eigenschaften transition und animation animiert werden.

Google sieht dies in Verbindung mit der Web Animations API als zukünftige Methode Animationen im Webdesign zu steuern. Auch Microsoft hat wiederholt erklärt, SVG nicht mit SMIL, sondern durch CSS-Animation unterstützen zu wollen. Leider unterstützen IE9 - IE11 keine CSS-animation bei SVG-Elementen. [1]

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Einschränkungen[Bearbeiten]

Probleme bei :focus[Bearbeiten]

Grundlagen und erste Anwendungsbeispiele von weichen Übergängen mit transition erhalten Sie schon im Grundlagenartikel SVG mit CSS stylen.

Wie dort bereits erwähnt, ist es aber noch nicht möglich beliebige SVG-Elemente mit dem tabindex-Universalattribut fokussierbar zu machen. Sie müssen solche Elemente immer in a-Element verschachteln.

Beachten Sie: In Chrome und Opera funktionieren Pseudoklassen wie :hover und :focus beim Aufrufen mit use-Elementen nicht. Notieren Sie alle Kindelemente des zu animierenden Objekts direkt in den Darstellungsbereich.

Siehe auch:

  • SVG-Icons, die bei :hover und :focus andere CSS-Festlegungen erhalten

Transformationen[Bearbeiten]

Für Transformationen gibt es in SVG das transform-Attribut und in CSS die gleichnamige Eigenschaft. Mit ihnen können Größenänderungen wie Skalierungen, Streckungen und Stauchungen, aber auch Drehungen und Verschiebungen vorgenommen werden. Trotz ihrer Ähnlichkeit gibt es aber gravierende Unterschiede z.B. in den Koordinatensystemen, auf denen die Transformationen basieren. Der IE und Edge unterstützen CSS-Transformationen bei SVG-Elementen überhaupt nicht.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Anwendungsbeispiele[Bearbeiten]

Laufende Linien[Bearbeiten]

Eine Spezialität von SVG sind animierte Randlinien; auf Englisch auch line-drawing genannt. In diesem einfachen Beispiel wird ein Ladebalken animiert.

Beispiel ansehen …
#linie {
  stroke: #3983ab;
  stroke-width: 10px;
  stroke-dasharray: 30 10;
  animation: strokeAni .7s infinite linear;
}
 
@keyframes strokeAni {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
  stroke-dashoffset: 0;
  }
}
  <path id="linie" d="m20,100 h600" />
  <path d="m620,80 v40 l20,-20z" fill="#3983ab"/>
Die Linie besteht aus einem Pfad, der mit mit der Eigenschaft stroke-dasharray einen gestrichelten Rand erhält. In der Animation strokeAni wird der Beginn des Randes verschoben, sodass es aussieht, als ob die Striche sich bewegen.


Wenn Sie die gestrichelte Line mit einem hohen Wert für stroke-dasharray versehen und diesen dann mit stroke-dashoffset so weit verschieben, dass sie ursprünglich nicht sichtbar ist, können Sie den Eindruck erwecken, dass das SVG-Objekt gerade gezeichnet wird.

Beispiel ansehen …
path {
  stroke: #c32e04;
  fill: none;
  stroke-width: 3px;
  stroke-dasharray: 900 900;
  animation: strokeAni 5s infinite linear;
}
 
@keyframes strokeAni {
	0% {
		stroke-dashoffset: 900;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
<path d="M200,350 v-100 l-50,-51 l-50,52 h100 l-100,100 v-100 l100,100 h-100" />
Die Randlinie hat eine Strichelung, deren Wert mit stroke-daharray festeglegt wird. Der Wert von 900 ist so hoch, dass die Strichelung länger als der Umriss des Hauses ist. Da er zu Beginn der Animation mit stroke-dashoffset um 900px verschoben wurde, erscheint der Rand allmählich und es entsteht ein Zeicheneffekt.


Siehe auch:

Animation entlang von Pfaden[Bearbeiten]

Mit transform und animation können Sie nur lineare Abläufe festlegen. Einer der großen Pluspunkte von SVG war die Möglichkeit Pfade von Kurven, Schleifen und unregelmäßigen Formen festzulegen und mit dem animateMotion-Element Objekte entlang dieser Pfade zu bewegen.

Mit der offset-path-Eigenschaft können Sie Pfade festlegen, an denen Sie grafische SVG-Objekte entlangführen können.

  • CSS 3.0
  • Chrome
  • Leer
  • Leer
  • Opera
  • Leer

Details: caniuse.com

Fazit[Bearbeiten]

So attraktiv und einfach SVG-Elemente mit CSS animiert werden können, gibt es in der praktischen Umsetzung noch viele Stolperfallen, die gerade bei umfangreicheren Projekten den Einsatz von JavaScript erfordern.

Quellen[Bearbeiten]

  1. Microsoft: CSS Transitions & Animations for SVG elements

Weblinks[Bearbeiten]