Snap.SVG-操作$（this）元素

Question

Snap.SVG和多个SVG元素的动画存在问题。 我想更改悬停路径，但是我在HTML中有许多相同的SVG。

HTML：

 var svg = $('.svg-wave'); var s = Snap(svg); var simpleCup = Snap.select('.svg-wave-normal'); var fancyCup = Snap.select('.svg-wave-hover'); var simpleCupPoints = simpleCup.node.getAttribute('d'); var fancyCupPoints = fancyCup.node.getAttribute('d'); svg.mouseenter(function() { simpleCup.animate({ d: fancyCupPoints }, 600); }).mouseleave(function() { simpleCup.animate({ d: simpleCupPoints }, 600); }); 

 svg .svg-wave-hover {opacity: 0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> <div class="item"> <svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"> <path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path> <path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path> </svg> </div> <div class="item"> <svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"> <path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path> <path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path> </svg> </div> <div class="item"> <svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"> <path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path> <path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path> </svg> </div> 

问题是，当我将鼠标悬停在上一个SVG上时，它将为第一个设置动画。 有人可以帮我从$（this）更改mouseenter / leave来工作吗？

Answer 1

我将建议一种不首先使用JQuery的方法，因为这并不是必须的。

我将更改css以使悬停路径display: none ，而不是opacity: 0 ，因为display none表示事件将正常进行，而opacity将捕获事件。 或者，您可以重新排列路径，因此最偏路径优先。

var normalWaves = Snap.selectAll('.svg-wave-normal');
var normalPoints = Snap.select('.svg-wave-normal').attr('d');
var hoverPoints = Snap.select('.svg-wave-hover').attr('d');

normalWaves.forEach(function( wave ) {
  wave.mouseover(function() {
    this.animate({
      d: hoverPoints
    }, 600); 
  })
  .mouseout(function() {
    this.animate({
      d: normalPoints
    }, 600);
  });
});

svg .svg-wave-hover { display: none; }

的jsfiddle