Skip to content
JavaScript Reference

SVG Animations

Im vorigen Kapitel haben wir gelernt, dass viele SVG-Attribute (die presentational attributes) im geheimen auch CSS-Eigenschaften sind. Sie können daher mit CSS transitions und keyframes animiert werden!

Hovern wir mal über einen Stroke:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle
    x="50"
    y="50"
    r="25"
    stroke="#FFFFFF"
    stroke-width="5" />
</svg>
svg.animated-stroke {
  circle {
    stroke: lime;
    transition:
      stroke 1000ms ease-in-out,
      stroke-width 2000ms ease-in-out,
      stroke-dasharray 3000ms ease-in-out;
  }
  circle:hover {
    stroke: yellowgreen;
    stroke-width: 10;
    stroke-dasharray: 10 10;
  }
}

Interessanter Nebeneffekt: wenn der Kreis keine Füllung hat, greift die Transition nur solange die Maus direkt über dem Dash-Stroke liegt, nicht über einem Zwischenraum und auch nicht im Kreis selbst.

Was lässt sich alles animieren?

  • alle presentational Attribute (stroke, fill, …)
  • die meisten geometric single-value Attribute funktionieren auch (z.B. x in <rect> oder ry in <ellipse>)
  • andere single-value Attribute wie x1/y1/x2/y2 in <line>, <polyline> und <polygon>, die keine Entsprechung in CSS haben, funktionieren nicht

Bei <path> kann man grundsätzlich zwischen den Punkten in d eine transition machen, aber Safari spielt noch nicht mit, daher müssen wir uns noch mit einer JavaScript-Bibliothek behelfen.