HTML CSS examples for SVG:Circle
morph a SVG diamond into a circle with animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <!-- w w w .j ava 2 s. co m--> <body> <svg viewbox="0 0 300 300" width="500" height="500" style="border:1px solid red;" preserveaspectratio="xMinYMax meet"> <rect id="shape2" rx="0" y="0" x="100" width="50" height="50" transform="rotate(45)"> <animate begin="shape2.mouseover" attributeName="rx" dur="700ms" to="50%" fill="freeze" /> <animate begin="shape2.mouseout" attributeName="rx" dur="700ms" to="0" fill="freeze" /> </rect> </svg> </body> </html>