Bitte warten...

JavaScript: SVG-Animationen

Mit JavaScript lassen sich SVGrafiken auch animieren. Dazu müssen diese in den HTML-Quelltext eingebunden sein.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<svg width='320px' height='320px'>
  <!-- Hauptachsen; umlaufende Strecke; Endpunkte; -->
  <line class='line2c' x1='0' y1='160.5' x2='320' y2='160.5' />
  <line class='line2c' x1='160.5' y1='0' x2='160.5' y2='320' />
  <line id='l1_0' class='line2' x1='320.5' y1='160.5' x2='160.5' y2='160.5' />
  <circle id='c1_0' class='line2' cx='320.5' cy='160.5' r='1' />
  <circle id='c2_0' class='line2' cx='160.5' cy='160.5' r='1' />
  
  <!-- Ellipse; Brennpunkte; Strecken PF1, PF2 -->
  <ellipse class='line1' cx='160.5' cy='160.5' rx='100' ry='60' />
  <circle class='line1b' cx='80.5' cy='160.5' r='2' />
  <circle class='line1b' cx='240.5' cy='160.5' r='2' />
  <line id='l2_0' class='line1c' x1='260.5' y1='160.5' x2='80.5' y2='160.5' />
  <line id='l3_0' class='line1c' x1='260.5' y1='160.5' x2='240.5' y2='160.5' />
  
  <!-- Schnittpunkt; Mittelpunkt; -->
  <circle id='c3_0' cx='260.5' cy='160.5' r='3' />
  <circle class='line2b' cx='160.5' cy='160.5' r='2' />
</svg>

<script>
  var a_0 = 100;
  var b_0 = 60;
  var tu_0 = 360;
  var t_0 = 0;
  doAnimation_0 = function() {
    alpha_0 = t_0 / tu_0 * 2 * Math.PI;
    var x1_0 = Math.cos(alpha_0) * (a_0 + b_0);
    var y2_0 = Math.sin(alpha_0) * (a_0 + b_0);
    var px_0 = Math.cos(alpha_0) * a_0;
    var py_0 = Math.sin(alpha_0) * b_0;
    document.getElementById('l1_0').setAttribute('x1', 160.5 + x1_0);
    document.getElementById('l1_0').setAttribute('y2', 160.5 - y2_0);
    document.getElementById('l2_0').setAttribute('x1', 160.5 + px_0);
    document.getElementById('l2_0').setAttribute('y1', 160.5 - py_0);
    document.getElementById('l3_0').setAttribute('x1', 160.5 + px_0);
    document.getElementById('l3_0').setAttribute('y1', 160.5 - py_0);
    document.getElementById('c1_0').setAttribute('cx', 160.5 + x1_0);
    document.getElementById('c2_0').setAttribute('cy', 160.5 - y2_0);
    document.getElementById('c3_0').setAttribute('cx', 160.5 + px_0);
    document.getElementById('c3_0').setAttribute('cy', 160.5 - py_0);
    t_0++;
  }
  setInterval(doAnimation_0, 50);
</script>

Oder eine Uhr:

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<svg id='clock' width='225' height='225'>
  <defs>
    <filter id='shadow' filterUnits='userSpaceOnUse'>
      <feGaussianBlur in='SourceAlpha' stdDeviation='1' />
      <feOffset dx='2' dy='2' result='offsetblur' />
      <feComponentTransfer>
        <feFuncA type='linear' slope='.8'/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode />
        <feMergeNode in='SourceGraphic' />
      </feMerge>
    </filter>
    <radialGradient id='grad1' r='100%' cx='51.077062133199%' cy='51.077062133199%' spreadMethod='pad'>
      <stop offset='46.238402061856%' stop-color='hsl(220,35%,30%)' />
      <stop offset='47.738402061856%' stop-color='hsl(220,35%,10%)' />
      <stop offset='49.261597938144%' stop-color='hsl(220,35%,10%)' />
      <stop offset='50.761597938144%' stop-color='hsl(220,35%,30%)' />
    </radialGradient>
  </defs>
  <circle id='c1' cx='50%' cy='50%' r='50%' fill='url(#grad1)' />
  <circle id='c2' cx='50%' cy='50%' r='47%' fill='hsl(220,10%,50%)' />
  <g id='scales'></g>
  <line stroke='hsl(220,10%,10%)' stroke-width='7.5' filter='url(#shadow)' />
  <line stroke='hsl(220,10%,10%)' stroke-width='5.625' filter='url(#shadow)' />
  <line stroke='hsl(0,85%,32%)' stroke-width='2.25' filter='url(#shadow)' />
</svg>
  
<script>
  r = document.getElementById('clock').getAttribute('width') / 2;
  out = '';
  for (i = 0; i < 60; i++) {
    out += '<line stroke=\'hsl(23,35%,10%)\' />';
  }
  document.getElementById('scales').innerHTML = out;
  lines = document.getElementById('clock').getElementsByTagName('line');
  d = [
    [r * .05, r * .91, r * .76],
    [r * .01, r * .90, r * .83]
  ];
  for (i = 0; i < 60; i++) {
    if (i % 5) e = 1; else e = 0;
    lines[i].setAttribute('stroke-width', d[e][0]);
    rad = i * Math.PI / 30;
    lines[i].setAttribute('x1', r + d[e][1] * Math.cos(rad));
    lines[i].setAttribute('y1', r + d[e][1] * Math.sin(rad));
    lines[i].setAttribute('x2', r + d[e][2] * Math.cos(rad));
    lines[i].setAttribute('y2', r + d[e][2] * Math.sin(rad));
  }
  function setNeedle(id, l, rad) {
    lines[id].setAttribute('x1', r + l * Math.cos(rad));
    lines[id].setAttribute('y1', r + l * Math.sin(rad));
    lines[id].setAttribute('x2', r - r * .1 * Math.cos(rad));
    lines[id].setAttribute('y2', r - r * .1 * Math.sin(rad));
  }
  function setClock() {
    dateObject = new Date();
    hours   = dateObject.getHours();
    minutes = dateObject.getMinutes();
    seconds = dateObject.getSeconds();
    setNeedle(60, r * .5, (hours + minutes / 60 + seconds / 3600) * Math.PI / 6 - Math.PI / 2);  // needle for hours
    setNeedle(61, r * .71, (minutes + seconds / 60) * Math.PI / 30 - Math.PI / 2);  // needle for minutes
    setNeedle(62, r * .71, seconds * Math.PI / 30 - Math.PI / 2);  // needle for seconds
  }
  setInterval(setClock, 100);
</script>