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

Posted 2023-05-08

【中文标题】尝试在 SVG 笔画出现时对其进行动画处理，但没有运气

【英文标题】：Trying to animate SVG stroke when it appears, but without luck

【发布时间】：2015-02-12 23:37:26

【问题描述】：

我有一个 SVG 路径，我正在尝试使用 jquery.appear 插件对其进行动画处理。

这就是它的样子：

<svg class="animated"  >
<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)
);

【参考方案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"  >
  <path d="M60 112,L151 237,L266 113"
   style="stroke: #2c3e50;
   fill:none;
   stroke-width:3px;
   stroke-linejoin: miter;
   stroke-miterlimit: 20.0;" />
</svg>

【讨论】：

嘿，非常感谢您抽出宝贵时间！我想失去 on mouseover 效果，而是在 SVG 出现后立即运行动画，但是当我删除 on mouseover 位时它不起作用。有什么想法吗？

NVM，看来 $('.animated').appear(function() 成功了 :) 非常感谢您的帮助！