JavaScript: SVG-Animationen
Mit JavaScript lassen sich SVGrafiken auch animieren. Dazu müssen diese in den HTML-Quelltext eingebunden sein.
Code kopieren
<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>
Code kopieren
<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>