我最近一直在把我的脚趾浸入SVG中,而我正在尝试将一颗钻石变成一个圆圈,当用户将它悬停在它上面时。
找到了本教程我注意到他们使用点来制作动画,但我的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技巧教程进行操作?
答案 0 :(得分:4)
对于那些感兴趣的人:
<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>
答案 1 :(得分: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>