如何将 SVG 菱形变成圆形

Question

我最近一直在将脚趾浸入 SVG 中，并且我目前正尝试在用户将鼠标悬停在钻石上方时将其变形为圆形。

我在CSS Tricks 上找到了这个教程

我注意到他们使用点来制作动画，但是我的 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"/>

有没有办法做到这一点？我如何获得这些形状的点，以便我可以遵循 CSS Tricks 教程？

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/