SVG graphics animation
Objectives
- use SVG for graphics
- use simple JavaScript for simple animation
In-class demonstration code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
var dx = 2, dy = 3, x = 50, y = 150;
function draw() {
var elem = document.getElementById('circ');
if (x < 20 || x > 180) dx = -dx;
if (y < 20 || y > 280) dy = -dy;
x += dx;
y += dy;
elem.setAttribute('cx', x);
elem.setAttribute('cy', y);
}
window.onload = function() {
setInterval(draw, 10);
}
</script>
<style>
h1 { text-align: center; }
#sv {
display: block;
width: 200px;
height: 300px;
margin: 0 auto;
border: 1px solid #000000;
background-color: #ff8080;
}
</style>
</head>
<body>
<h1>Demo</h1>
<svg id="sv" viewBox="0 0 200 300" width="200" height="300">
<circle id="circ" cx="0" cy="0" r="20" stroke="#0000ff" stroke-width="0" fill="#0000ff" />
</svg>
</body>
</html>