Clever Geek Handbook

How to turn an SVG diamond into a circle

I recently dived into SVG and am currently trying to turn a diamond into a circle when the user pounces on it.

I found this tutorial in CSS Tricks

I noticed they use dots for animation, but my SVG shapes are:

<circle cx="49.873" cy="50.155" r="49.845"/>

and

<rect x="15.211" y="14.798" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.8426 50.3112)" width="70.198" height="71.034"/>

Is there a way to do this? How do I get the points of these shapes so I can follow the CSS Tricks tutorial?

+3


source to share


1 answer


For those who wish:

<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>


http://jsfiddle.net/4e71gra6/

+4


source






More articles:


All Articles