svg testing

svg stuff

by mrcrazypants987

HTML

<svg width="500" height="500">
 <g transform="translate100,100)">
<circle id="circle" cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="red" />
 <animateMotion path="M 50 0 L 50 50" dur="1s" fill="freeze" />
   
   </g>
 <g transform="translate100,100)">
<circle id="circle" cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="green" />
 <animateMotion path="M 0 0 L 50 50" dur="1s" fill="freeze" />
   
   </g>
    <g transform="translate100,100)">
<circle id="circle" cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="blue" />
 <animateMotion path="M 0 50 L 50 50" dur="1s" fill="freeze" />
   
   </g>
   <g transform="translate100,100)">
<circle id="circle" cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="yellow" />
 <animateMotion path="M 75 75 L 50 50" dur=".7s" fill="freeze" />
   
   </g>
</svg>


<button class ="btn"onclick="circle()">woo</button>

<script>
function circle(){
document.getElementById("circle").setAttribute("fill", "#333");
} 


</script>