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

Question

I have a problem with Snap.SVG and animation of multiple SVG elements. I want to change path on hover, but i have many same SVG in html.

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> 

The problem is that when i hover last SVG, it animate the first one. Can someone help me to change mouseenter/leave to work from $(this) ?

Answer 1

I'm going to suggest a way without using JQuery firstly, as it's not really necessary.

I would change your css to make the hover path display: none , rather than opacity: 0 , as display none means that events will pass through fine, whereas opacity will capture them. Or you could reorder the paths, so the hove paths come first.

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