Question

首先，我是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小提琴演示：

HERE

Answer 1

有两种解决方案。第一个非常简单，但如果用户快速进入和退出SVG元素，它将产生不需要的效果。从本质上讲，动画会循环太长时间;但是，如果用户随意地悬停在元素上，它就可以正常工作。

Here's a demo with that solution

另一种解决方案更加强大，可以解决用户异常快速的“悬停切换”问题。如果用户快速地进出元素，此解决方案就会停止并反转动画。这是我在任何具有速度的悬停状态下使用的。

You can view that solution here

这是使用JQuery的javascript代码

...

var svg = $('.curtain');
var path = svg.find('path'); // define svg path
path.data({animating:false}); // add data for animation queue purposes

path.hover(function() { // mouse enter

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});

} else {  // begin default animation
$(this).velocity({fill: '#ffcc00'},{
  duration:500,
  begin: function(){
    path.data({animating:true});
  },
  complete: function(){
    path.data({animating:false});
  }
});

} // end of conditional statement
}, function() { // mouse exit

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});


} else { // begin default animation

$(this).velocity({fill: '#000'},{
  duration:500,
  begin: function(){
    path.data({animating:true});
  },
  complete: function(){
    path.data({animating:false});
  }
});

} // end of conditional statement
}); // end of hover function

...

Answer 2

如果你想为路径尺寸设置动画，我建议使用Snap.svg。 Here's a simple example using snap.svg to animate the paths.

HTML

<!--add hover state data to div-->  
  <div class="g50" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
    <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
</div>

 <!--add hover state data to div-->
<div class="g50" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
    <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
</div>

JS

(function() {

    function init() {
        var speed = 250,
            easing = mina.easeinout;

        [].slice.call ( document.querySelectorAll( '.g50' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ),
            path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' )
                };

            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
        console.log(pathConfig.to);
            } );

            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }

    init();

})();

使用velocity或snap.svg悬停时SVG动画路径属性“d”

2 个答案:

HTML

JS