SVG mit Reagieren auf Mausklick und Animation.

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
  </head>

  <body>
    <h1>Hallo SVG!</h1>
    <svg width="200" height="200" viewBox="0 0 74 74" id="svg"></svg>
    <p>
      Die gesamte SVG-&Uuml;bung findest du auf der 
      <a href="http://coderdojo-linz.github.io/trainingsanleitungen/web/erste-schritte-mit-svg.html">CoderDojo Linz</a>
      Seite.
    </p>

    <script src="script.js"></script>
  </body>

</html>

var s = Snap("#svg");

var c1 = s.circle(37, 37, 37).attr("fill", "#F0CA00");
var c2 = s.circle(37, 37, 35).attr("fill", "#008754");
var c3 = s.circle(37, 37, 25).attr("fill", "#F0CA00");
var g = s.group(c1, c2, c3);

var p = s.path("m 44.5,34 -15,0 0,-16 -6,0 0,38 6,0 0,-17 15,0 0,17 6,0 0,-38 -6,0 z")
  .attr("fill", "#008754");

var direction = 360;
g.click(function() {
  g.animate({ opacity: (direction > 0) ? 0 : 1 }, 1000);
  p.animate({ transform: 'R' + direction + ', 37, 37' }, 1000);
  direction = (direction > 0) ? 0 : 360;
});