首先,我是 svg 的完整初学者,我在 Google 上找不到解决问题的好答案。我一直在尝试做的只是在悬停时为 svg 路径设置动画。
我已经下载并使用了 snap.svg 和 velocity.js,因此,如果您知道使用其中之一的答案,或者可能是展位,请随意。
我当前的代码和我尝试的速度:
<div class="g50">
<svg class="curtain" viewBox="0 0 180 320" preserveAspectRatio="none">
<path d="M 180,160 0,200 0,0 180,0 z"/>
</svg>
</div>
<div class="g50">
<svg class="curtain" viewBox="0 0 180 320" preserveAspectRatio="none">
<path d="M 180,200 0,160 0,0 180,0 z"/>
</svg>
</div>
JS:
$('.curtain').on('mouseenter', function(){
$(this).find('path').velocity({ 'd': "m 180,34.57627 -180,0 L 0,0 180,0 z" });
});
JS 小提琴演示: