SVG 다이아몬드를 원형으로 변모시키는 방법

Question

저는 최근에 내 발가락을 SVG에 담그고 있습니다. 사용자가 마우스를 가져 가면 현재 다이아몬드를 원으로 변형하려고합니다.

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

및

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

:

나는 이것이 내가 내 SVG 모양은 그들이 그러나 애니메이션을 할 포인트를 사용하고있는 것으로 나타났습니다 CSS Tricks

에 걸쳐 개별지도 발견 이것을 할 수있는 방법이 있습니까? CSS 트릭 튜토리얼을 따라갈 수 있도록 이러한 모양의 포인트를 얻는 방법은 무엇입니까? 관심있는 사람들을 위해

Answer 1

:

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