jquery - 使用 Snap.svg 设置边界框以在悬停时为分组 SVG 中的元素设置动画

Question

我是 Snap.SVG 的新手，遇到了一个小问题。我有一个小的 SNAP.svg 动画，我想在悬停时运行它。它基本上是一种 WAVE 效果，其中每个字母在悬停整个元素时单独跳跃。我已经获得了基本效果......但是，悬停不仅适用于整个元素，还适用于单个元素。也就是说，我可以将鼠标悬停在框上并获取波浪，我可以将鼠标悬停在字母上以获取波浪。所以，基本上，只要鼠标在主容器内并四处移动，字母就会到处跳动。想要驯服它，所以它只发生在整个容器的 HOVER 上。有什么想法吗？我确信有一种更有效的方法可以做到这一点...但这就是我目前所在的位置。

这里简化了 fiddle : http://jsfiddle.net/8j11b0q4/1/

HTML

<svg id="logo" viewBox="0 0 400 100"></svg>

CSS

#logo {fill:#303030;width:200px;height:100%;}
#logo:hover {transition: fill .4s ease-in-out; fill:#4bd1c7;}
#logo:active {transition: fill .02s ease-in; fill:#ccc;}

JS

var s = Snap("#logo");

var a = s.path("M58.536 69.744H29.817l-3.99 13.513H0L30.768 1.396h27.592L89.12 83.257H62.631L58.536 69.744z M53.289 52 l-9.036-29.427l-8.941 29.427H53.289z").addClass("a");
var b = s.path("M103.506 1.396h47.352c7.892 0 13.9 2 18.2 5.863c4.225 3.9 6.3 8.7 6.3 14.5 c0 4.84-1.508 8.99-4.523 12.453c-2.01 2.309-4.952 4.132-8.823 5.472c5.881 1.4 10.2 3.8 13 7.3 c2.773 3.4 4.2 7.8 4.2 12.982c0 4.244-0.987 8.06-2.959 11.447c-1.974 3.388-4.672 6.068-8.097 8 c-2.122 1.228-5.324 2.122-9.604 2.68c-5.695 0.745-9.474 1.117-11.335 1.117h-43.667V1.396z M129.025 33.504h11 c3.945 0 6.691-0.679 8.236-2.038c1.544-1.358 2.317-3.323 2.317-5.891c0-2.382-0.773-4.244-2.317-5.584 c-1.545-1.34-4.235-2.01-8.069-2.01h-11.168V33.504z M129.025 65.667h12.899c4.355 0 7.427-0.772 9.214-2.317 c1.787-1.544 2.68-3.62 2.68-6.226c0-2.419-0.885-4.364-2.652-5.835c-1.769-1.47-4.868-2.206-9.297-2.206h-12.843V65.667z").addClass("b");
var c = s.path("M253.192 49.753l22.169 6.701c-1.489 6.217-3.835 11.41-7.036 15.579c-3.202 4.169-7.176 7.315-11.922 9.4 c-4.746 2.122-10.786 3.183-18.12 3.183c-8.897 0-16.165-1.293-21.805-3.878c-5.64-2.585-10.507-7.132-14.602-13.643 c-4.095-6.51-6.142-14.844-6.142-25c0-13.541 3.602-23.948 10.805-31.221C213.742 3.6 223.9 0 237.1 0 c10.311 0 18.4 2.1 24.3 6.254c5.9 4.2 10.3 10.6 13.2 19.209l-22.336 4.97c-0.781-2.494-1.601-4.318-2.457-5.472 c-1.415-1.935-3.146-3.425-5.192-4.467c-2.048-1.042-4.338-1.563-6.868-1.563c-5.733 0-10.126 2.306-13.179 6.9 c-2.309 3.421-3.462 8.793-3.462 16.117c0 9.1 1.4 15.3 4.1 18.657c2.754 3.4 6.6 5 11.6 5 c4.839 0 8.496-1.358 10.972-4.076C250.279 58.9 252.1 54.9 253.2 49.753z").addClass("c");
var d = s.path("M294.27 1.396h37.58c7.407 0 13.4 1 18 3.016c4.56 2 8.3 4.9 11.3 8.7 c2.978 3.8 5.1 8.1 6.5 13.123c1.34 5 2 10.3 2 15.858c0 8.749-0.996 15.533-2.987 20.4 c-1.991 4.821-4.756 8.86-8.292 12.117c-3.537 3.258-7.334 5.426-11.392 6.505c-5.547 1.489-10.572 2.233-15.076 2.233h-37.58 V1.396z M319.565 19.935v44.727h6.198c5.286 0 9.046-0.586 11.28-1.759c2.233-1.173 3.982-3.22 5.249-6.142 c1.265-2.922 1.898-7.659 1.898-14.211c0-8.673-1.416-14.611-4.244-17.813c-2.829-3.201-7.521-4.802-14.071-4.802H319.565z").addClass("d");

var g = s.group(a,b,c,d);

var myMatrix = new Snap.Matrix();
myMatrix.translate(0,-15);
var InvertedMatrix = myMatrix.invert(0,0);

s.hover (function() {
a.animate({ 
  transform: myMatrix },80, mina.easeinout, function() { 
  a.animate({ 
    transform: InvertedMatrix }, 80, mina.easeinout) 
 });
b.animate({ 
  transform: myMatrix }, 95, mina.easeinout, function() { 
  b.animate({ 
    transform: InvertedMatrix }, 95, mina.easeinout)
 });
c.animate({ 
  transform: myMatrix },110, mina.easeinout, function() { 
  c.animate({ 
    transform: InvertedMatrix }, 110, mina.easeinout) 
 });
d.animate({ 
  transform: myMatrix },125, mina.easeinout, function() { 
  d.animate({ 
    transform: InvertedMatrix }, 125, mina.easeinout) 
 });
});

谢谢!

Answer 1

为了防止动画再次触发你可以添加如下CSS声明:

#logo path {pointer-events: none;}

http://jsfiddle.net/2xbduefo/