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 に答える