Beispiel:SVG-Animation-01.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
--blue: #337799;
--green: #8db243;
--red: #c82f04;
--yellow: #dfac20;
}
</style>
<title>SMIL - Animation 1</title>
</head>
<body>
<h1>SMIL - Animation 1</h1>
<svg viewBox="0 0 600 300">
<ellipse cx="100" cy="100" rx="50" ry="50" fill="red">
<animate attributeName="ry" to="100" dur="3s"/>
</ellipse>
<rect x="250" y="50" width="100" height="100" rx="50" ry="50" fill="gold">
<animate attributeName="rx" to="0" dur="3s" />
<animate attributeName="ry" to="0" end="3s" />
</rect>
<path d="m450,50 h100 l-50,100z" fill="steelbue" stroke="transparent"
stroke-width="5">
<animate attributeName="fill" from="steelblue" to="transparent" begin="1s" dur="3s" fill="freeze" />
<animate attributeName="stroke" from="transparent" to="green" begin="1s" dur="3s" fill="freeze" />
<animate attributeName="stroke-width" from="0" to="5" begin="1s" dur="3s" fill="freeze" />
</path>
</svg>
</body>
</html>
