4

我最近一直在涉足 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 技巧教程进行操作？

4

2 回答 2

7

对于那些感兴趣的人：

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

于 2014-11-12T11:01:31.387 回答
0

扩展 user1788364 的第一个答案：

保存形状的平方值：

https://jsfiddle.net/HoretskiyDima/xfat6oc2/13/

<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)">
        
     <!-- Making cirle from rectangle -->
     <animate begin="shape2.mouseover" attributeName="rx" dur="2000ms" to="50%" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="rx" dur="325ms" to="0" fill="freeze"/>

     <!-- In order to save square value, we need bigger radius then rectangle -->
     <!-- S = width * height -->
     <!-- S = PI * r^2 -->
     <!-- d = r * 2 =  sqrt(S/PI) * 2 = 56 -->
     <animate begin="shape2.mouseover" attributeName="width" dur="375ms" to="56" fill="freeze"/>
     <animate begin="shape2.mouseout;370ms" attributeName="width" dur="675ms" to="50" fill="freeze"/>
     <animate begin="shape2.mouseover" attributeName="height" dur="375ms" to="56" fill="freeze"/>
     <animate begin="shape2.mouseout;370ms" attributeName="height" dur="675ms" to="50" fill="freeze"/>

     <!-- In order to pin shape center position on the screenm we need to move back on half of delta radius -->
     <!-- (56 - 50) / 2 = 3 -->
     <animate begin="shape2.mouseover" attributeName="x" dur="375ms" to="97" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="x" dur="675ms" to="100" fill="freeze"/>
     <animate begin="shape2.mouseover" attributeName="y" dur="375ms" to="-3" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="y" dur="675ms" to="0" fill="freeze"/>
     
     <!-- TODO: "rx" attribute animation timing working strange. -->
  </rect>
</svg>
于 2021-04-18T12:00:54.197 回答