Snap.SVG - манипулировать элементом $ (this) - PullRequest
Новая
       35

Snap.SVG - манипулировать элементом $ (this)

0 голосов
/ 17 октября 2018

У меня проблема с Snap.SVG и анимацией нескольких элементов SVG.Я хочу изменить путь при наведении, но у меня есть много таких же SVG в 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>

Проблема в том, что при наведении курсора на последний SVG он оживляет первый.Может кто-нибудь помочь мне поменять мышку / оставить на работу с $ (этой)?

1 Ответ

0 голосов
/ 18 октября 2018

Во-первых, я собираюсь предложить способ без использования JQuery, так как в этом нет особой необходимости.

Я бы изменил ваш CSS, чтобы в качестве отображения отображался путь при наведении display: none, а не opacity: 0none означает, что события будут проходить нормально, тогда как непрозрачность захватит их.Или вы можете изменить порядок путей, так что сначала идут пути хов. 

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

...