dskd-17-008 arcs

<!DOCTYPE html>
<html>
<head>
<title>arc, click to rotate</title>
<style type="text/css">
#svg {
	position: absolute;
	width: 300px; height:600px;
	top: 10px; left: 10px;
	border: 1px solid #ccc;
}
</style>
</head>
<body>
<svg id="svg" viewBox="0 0 300 600">
	<path class="arc" fill="#f00" d="M150,20 M150,10v10c49.6,0,90,40.4,90,90h10C250,54.8,205.2,10,150,10L150,10"/>
	<path class="arc" fill="#e00" d="M150,210 M150,200v10c49.6,0,90,40.4,90,90h10C250,244.8,205.2,200,150,200L150,200"/>
	<path class="arc" fill="#d00" d="M150,400 M150,390v10c49.6,0,90,40.4,90,90h10C250,434.8,205.2,390,150,390L150,390"/>
	<path class="arc" fill="#c00" d="M150,310 M150,300v10c49.6,0,90,40.4,90,90h10C250,344.8,205.2,300,150,300L150,300"/>
</svg>

<script>
var arcs = document.getElementsByClassName("arc");
console.log('arcs', arcs);

for(var i=0; i<arcs.length; i++){
	var arc = arcs[i];
	arc.setAttribute("rotation", 0);

	arc.onclick = function(){
		var rot = parseInt(this.getAttribute("rotation"));
		//console.log('clicked', this, rot);
		rot += 90;
		//if( rot > 360 ) rot = rot - 360;
		this.setAttribute("rotation", rot);
		this.setAttribute("style", "transform: rotateZ("+ rot +"deg); transform-origin: 0% 100%; transition: transform 0.5s;");
	}
}
</script>
</body>
</html>