Question

我有一个SVG路径，我尝试使用jquery.appear插件显示它的动画。

这就是它的样子：

<svg class="animated" width="1170" height="350">
<path d="M60 112,L151 237,L266 113"
   style="stroke: #2c3e50;
   fill:none;
   stroke-width:3px;
   stroke-linejoin: miter;
   stroke-miterlimit: 20.0;" />
</svg>

和JS：

function simulatePathDrawing(path) {

  var length = path.getTotalLength();

  path.style.transition = path.style.WebkitTransition = 'none';
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;

  path.getBoundingClientRect();

  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2.5s ease-in-out';
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '3px';
  };

  $('.animated path').appear(function() {
    simulatePathDrawing(this);
  });

但是，如果我尝试使用鼠标悬停功能运行它，它可以工作。有什么建议吗？

var chars = $('.animated path').on('mouseover', function(e) {
   simulatePathDrawing(this)
});

Answer 1

SVG path在＆＃34; DOM＆＃34;中没有宽度或高度。感。因此，它无法滚动到视图以与出现的插件一起使用。

相反，您可以在SVG元素上应用appear()。请注意，您使用appear()函数初始化插件，然后使用on('appear')将其绑定到元素：

$('.animated').appear();
$('.animated').on('appear', function() {
  simulatePathDrawing($('.animated path')[0]);
});

代码段 - 向下滚动以查看appear动画：

＆＃13;

function simulatePathDrawing(path) {
  var length = path.getTotalLength();

  path.style.transition = path.style.WebkitTransition = 'none';
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;

  path.getBoundingClientRect();

  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2.5s ease-in-out';
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '3px';
};
console.clear();

var chars = $('.animated path').on('mouseover', function(e) {
  simulatePathDrawing(this)
});

$('.animated').appear();
$('.animated').on('appear', function() {
  simulatePathDrawing($('.animated path')[0]);
});

＆＃13;

body {
  margin-top:500px;
  height: 1000px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/morr/jquery.appear/master/jquery.appear.js"></script>
<svg class="animated" width="1170" height="350">
  <path d="M60 112,L151 237,L266 113"
   style="stroke: #2c3e50;
   fill:none;
   stroke-width:3px;
   stroke-linejoin: miter;
   stroke-miterlimit: 20.0;" />
</svg>

＆＃13;

试图在SVG中风出现时动画，但没有运气

1 个答案: