<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="500px" height="500px" viewBox="0 0 100 100">
<!-- <rect x="20" y="30" width="30" height="50" fill="red" stroke="black"/> -->
<!-- <polygon points="10,10 30,10 30,50 10,50" fill="pink" stroke="black" stroke-dasharray="1" stroke-dashoffset="10"/> -->
<!-- <circle cx="10" cy="10" r="5" fill="blue"/> -->
<!-- <ellipse cx="10" cy="10" rx="30" ry="10"/> -->
<!-- <polygon points="10,40 30,40 14,50 20,33 26,50" fill="pink"
stroke="black" fill-rule="evenodd"/>
<polyline points="10,20 30,30" stroke="black" fill="none"/>
<text x="20" y="20" fill="pink" stroke="blue" stroke-width="0.5" stroke-dasharray="1" stroke-dashoffset="5" font-size="20px">hello!</text>
<rect x="30"y="20" width="20" height="30" transform-origin="center" style="tranform-box:fill-box" transform="scale(1.5)"/> -->
<rect x="30" y="20" width="20" height="30">
<set attributeName="fill" to="red" begin="click"/>
<set attributeName="fill" to="blue" begin="dblclick"/>
<set attributeName="fill" to="yellow" begin="mousemove"/>
<set attributeName="fill" to="pink" begin="mouseout"/>
</rect>
</svg>
</body>
</html>