Beispiel:Animation Pythagoras SMIL.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Pythagoras Animation mit SMIL</title>
<style>
body {
background: #fff;
font-family: sans-serif;
}
svg {
width: min(460px, 96vw);
height: auto;
}
line, path {
fill: none;
stroke-width: 1;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
transform-box: fill-box;
}
#radien path {
fill: none;
stroke: orange;
stroke-width: .5;
stroke-dasharray: 1, 2;
}
text {
fill: green;
font-family: sans-serif;
font-size: 10px;
white-space: pre;
text-anchor: middle;
}
#rechter_winkel, #zahlen, #radien {
opacity: 0;
transform-box: fill-box;
}
</style>
</head>
<body>
<p>Pythagoras SMIL-Animation <button id="start_button" type="button" disabled>Neustart</button></p>
<svg id="pyth" viewBox="0 0 70 70">
<defs>
<animate id="start" attributeName="visibility" values="visible;visible" begin="indefinite" dur="0.001s" fill="freeze"/>
</defs>
<g id="radien">
<path id="radius_3" d="M 10 20 C 27 20 40 33 40 50"/>
<path id="radius_4" d="M 20 50 C 20 28 38 10 60 10"/>
<animate attributeName="opacity" values="0;1" begin="start.begin+5.52s" dur="0.95s" fill="freeze"/>
<animate attributeName="opacity" values="1;0" begin="start.begin+10.01s" dur="0.98s" fill="freeze"/>
</g>
<line id="linie_5" style="transform-origin:50% 50%" x1="10" y1="-10" x2="60" y2="-10">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 60" begin="start.begin+0s" dur="2s" fill="freeze"/>
</line>
<line id="linie_4" style="transform-origin:100% 50%" x1="10" y1="-20" x2="50" y2="-20">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;10 70" begin="start.begin+0s" dur="4s" fill="freeze"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;90" begin="start.begin+2s" dur="2s" fill="freeze"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-66;-39;-53.13" begin="start.begin+6.5s" dur="3s" fill="freeze" keyTimes="0;0.3;0.6;1"/>
</line>
<line id="linie_3" style="transform-origin:0% 100%" x1="10" y1="-30" x2="40" y2="-30">
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;0 80" begin="start.begin+2s" dur="3s" fill="freeze"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-90" begin="start.begin+2.8s" dur="2.2s" fill="freeze"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;50;21;36.87" begin="start.begin+6s" dur="4s" fill="freeze" keyTimes="0;0.3;0.6;1"/>
</line>
<g id="rechter_winkel" style="transform-origin:100% 100%">
<path style="fill:none;stroke:green;transform-box:fill-box" d="M 9 19 C 9 13 13 9 19 9"/>
<circle style="fill:green;stroke:none" cx="15" cy="15" r="2"/>
<animate attributeName="opacity" values="0;1" begin="start.begin+10s" dur="2s" fill="freeze"/>
<animateTransform type="rotate" additive="sum" attributeName="transform" values="0;-142" begin="start.begin+10s" dur="2s" fill="freeze"/>
<animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-12 0" begin="start.begin+10s" dur="2s" fill="freeze"/>
</g>
<g id="zahlen">
<text x="34" y="60">5</text>
<text x="6" y="40" style="font-size:10px">3</text>
<text x="64" y="40" style="font-size:10px">4</text>
<animate attributeName="opacity" values="0;1" begin="start.begin+5s" dur="2s" fill="freeze"/>
</g>
<rect x="0" y="0" width="0" height="0" opacity="0">
<animate id="done" attributeName="width" from="0" to="0" begin="start.begin+0s" dur="12s" fill="freeze"/>
</rect>
</svg>
<script>
document.addEventListener('DOMContentLoaded', function () {
const svg = document.getElementById('pyth');
const btn = document.getElementById('start_button');
const start = svg.querySelector('#start');
const done = svg.querySelector('#done');
if (!start || !done) return;
const run = () => {
btn.disabled = true;
done.addEventListener('endEvent', () => (btn.disabled = false), { once: true });
svg.pauseAnimations();
start.beginElement();
svg.setCurrentTime(0);
svg.unpauseAnimations();
};
btn.addEventListener('click', (e) => { e.preventDefault(); run(); });
run();
});
</script>
</body>
</html>
