<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg style="width:600px;height:400px">
<!-- <rect width="200px" height="200px" x="200" y="200" rx=100 ry="100";
style="fill:orange;stroke:black;stroke-width:5;fill-opacity:0.2;"/> -->
<!-- <circle cx=300 cy=250 r="70"style="fill:blue;stroke:green;
stroke-width:10;fill-opacity:0.2;"/> -->
<!-- <rect width="100px" height="300px" x="100" y="100" rx='30'/>
<circle cx=150 cy=150 r="30" style="fill:red"/>
<circle cx=150 cy=250 r="30" style="fill:yellow"/>
<circle cx=150 cy=350 r="30" style="fill:green"/> -->
<!-- <ellipse cx=160 cy=330 rx="140" ry="40"style="fill:green";/>
<ellipse cx=160 cy=300 rx="120" ry="40" style="fill:black";/>
<ellipse cx=160 cy=270 rx="140" ry="40" style="fill:red";/>
<line x1="10" y1="30" x2="10" y2="80" style="stroke:red;stroke-width:5";/> -->
<!-- <polygon points="30 40,40 50,30 50" style="fill:none;stroke:black;"/>
<polyline points="0 100,100 100,100 200,200 200,
200 300,300 300,300 400" style="fill:yellow;stroke:black;"/> -->
<!-- <text x="100" y="100" transform="tanslate(50,50)"
style="fill:green;stroke:blue;">zero</text> -->
<!-- <rect width="100" height="100" x="100" y="100" transform="rotate(40)"
transform-origin="center" style="transform-box:fill-box"/>
<rect width="100" height="150" x="100" y="100" -->
<!-- transform="scale(0.2)" transform-origin="center"/> -->
<rect width="50" height="50" fill="blue">
<set attributename="fill" to="green" begin="click">
<set attributename="fill" to="red" begin="dblclick">
<set attributename="fill" to="yellow" begin="mouseover">
<set attributename="fill" to="black" begin="mouseout">
</rect>
</svg>
</body>
</html>