Question

我正在使用snap.svg创建一个带有边框的圆形按钮，该边框在悬停时围绕按钮缠绕并在mouseout上展开但我不得不将它一起破解。

我用作模板的原始实现使用了一个step函数作为Snap.animate中的setter函数，但我遇到了一个问题，mouseout事件会从路径中留下一个残余块，所以我添加了“-1”从第二个“步”变量（第55行）。

path: Snap.path.getSubpath(loop, 0, step-1)

js的相关部分

var hoverbpath =  s.path({
  path: Snap.path.getSubpath(loop, 0, 0),
  stroke: "#000",
  fillOpacity: 0,
  strokeWidth: 0,
  strokeLinecap: "square"
});

ctabtn.hover(function(e){
  Snap.animate(0, loopLength,
    function(step){
      hoverbpath.attr({
      path: Snap.path.getSubpath(loop, 0, step),
      strokeWidth: 11
    });
  }, 250, mina.easeIn);
ctabtn.attr({fill: "l(0, 0, 1, 1)#000-#333"});
});

hoverbpath.mouseout(function(e){
  Snap.animate(loopLength, 0,
    function(step){
      hoverbpath.attr({
      path: Snap.path.getSubpath(loop, 0, step-1),
      strokeWidth: 11
    });
  }, 250, mina.easeOut);
ctabtn.attr({fill: "l(0, 0, 1, 1)#333-#000"});
});

它工作正常，但每次mouseout事件都会返回错误：“错误：属性d =”M74.7,5.2CNaN，NaN，NaN，NaN，NaN，NaN“e @ snap.svg-min的值无效。 JS：18"

我想知道是否可以优化按钮和动画的实现，如果没有，那么如何修复错误。

谢谢！

Answer 1

借用this example中的代码，只需将回调添加到mouseout处理程序的末尾，即可将路径设置为strokeWidth=0。所以它不会删除最后一小块，它只是隐藏它，我觉得很好。

第一步：删除您添加的step-1黑客，只需在两个处理程序中使用step即可。然后像这样调整你的JS：

hoverbpath.mouseout(function(e){
  Snap.animate(loopLength, 0,
    function(step){
      hoverbpath.attr({
        path: Snap.path.getSubpath(loop, 0, step),
        strokeWidth: 11
      });
    }, 250, mina.easeOut, function() {
      hoverbpath.attr({
        path: Snap.path.getSubpath(loop, 0, 0),
        strokeWidth: 0
      });
    });
ctabtn.attr({fill: "l(0, 0, 1, 1)#333-#000"});
});

JSFiddle：https://jsfiddle.net/aha24p0h/1/

Snap.svg循环路径动画返回NaN的路径数据错误

1 个答案: