-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg.html
45 lines (39 loc) · 1.24 KB
/
svg.html
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
<html>
<head>
<title>My First SVG</title>
<script type="text/javascript">
var RADIANS_PER_STEP = Math.PI / 256;
var RADIUS = 200;
var MS_PER_STEP = 10;
var FILL_COLORS = ['red', 'blue', 'yellow', 'green', 'orange'];
function updateCircle(circle, step) {
var angle = (step * RADIANS_PER_STEP) % (2 * Math.PI);
var x = RADIUS * Math.cos(angle) + 400;
var y = RADIUS * Math.sin(angle) + 400;
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
}
document.addEventListener('DOMContentLoaded', function() {
var svg_canvas = document.getElementById('svg_canvas');
// make circle clickable
var circle = document.getElementById('moving_circle');
var clickNo = 1;
circle.addEventListener('click', function(evt) {
circle.setAttribute('fill', FILL_COLORS[clickNo % FILL_COLORS.length]);
clickNo++;
});
// animate circle
var step = 0;
setInterval(function() {
updateCircle(circle, step);
step++;
}, MS_PER_STEP);
});
</script>
</head>
<body>
<svg width="800" height="800" style="border: solid black 1px" id="svg_canvas">
<circle cx="400" cy="400" r="40" stroke="black" stroke-width="3" fill="red" id="moving_circle"/>
</svg>
</body>
</html>