Wiki  |   Blog  |   Sitemap  |   Search  
JavaScript UI FrameworkExamplesUI Languages (SVG, XUL..)SVG 1.1 examplesSVG+SMIL/DOM


Hover mouse over the circle and it will pulse 3 times. Mousedown and mouseup on rounded square and it will change its size. (The example will not work in Chrome 2)

Source code

<script type="application/ample+xml" xmlns:smil=""> <svg:svg height="400px" width="400px" viewBox="0 0 400 400" xmlns:svg=""> <svg:circle cx="100" cy="200" r="50" stroke="#123fff" fill="#fff123" stroke-width="10"> <smil:animate begin="mouseover" dur="500ms" repeatCount="3" attributeType="XML" attributeName="r" to="100"/> </svg:circle> <svg:rect x="200" y="150" width="100" height="100" rx="10" ry="10" stroke="#123fff" fill="#fff123" stroke-width="10" onmouseover="this.setAttribute('fill', '#765f1f')" onmouseout="this.setAttribute('fill', '#fff123')" onmousedown="this.setAttribute('stroke-width', '20'); this.setCapture(true)" onmouseup="this.setAttribute('stroke-width', '10'); this.releaseCapture()"/> </svg:svg> </script>