尝试在 SVG 笔画出现时对其进行动画处理，但没有运气

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 没有“DOM”意义上的宽度或高度。因此，它不能滚动到视图中以与出现插件一起使用。

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

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

片段 – 向下滚动查看appear 动画：

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]);
});

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

<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>