Snap.SVG - 操作 $(this) 元素答案

【问题标题】：Snap.SVG - Manipulate $(this) elementSnap.SVG - 操作 $(this) 元素
【发布时间】：2019-03-22 06:19:42
【问题描述】：

我对 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 时，它会为第一个 SVG 设置动画。有人可以帮我从 $(this) 更改 mouseenter/leave 以工作吗？

【问题讨论】：

标签： javascript jquery svg snap.svg

【解决方案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

【讨论】：