在for循环中更改SVG行的strokeDashoffset

Kalle Kromann 发表于 Dev

卡勒·克罗曼（Kalle Kromann）

我正在尝试为扩展的线设置动画。我已经在css中拥有它，但是我需要在javaScript中完成它，因为那是获得所需长度的唯一方法。我认为我已经很近了，但是没有用！有任何想法吗？

以下是我的代码。如您所见，我得到了路径的长度，并为其指定了一个strokeDashArray。这意味着该行将变为虚线，但破折号将填满整个行。诀窍是减小strokeDashoffset值，因为这确定了破折号的起始位置。因此，如果它也从pathLength开始，则该行将是完全不可见的，减小该值将显示该路径。

我知道这可能是顺便说一句:)如前所述，我已经可以在CSS中使用它了。

var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();

element.style.strokeDasharray = pathLength;
element.style.strokeDashoffset = pathLength;

function animateRoute (e) 
{
e.style.strokeDashoffset = e.style.strokeDashoffset - 100;
}

for (i = 0; i < 100; i++)
{
animateRoute(element);
}

提前致谢！

保罗·勒博

代码：

function animateRoute (e) 
{
   e.style.strokeDashoffset = e.style.strokeDashoffset - 100;
}

for (i = 0; i < 100; i++)
{
   animateRoute(element);
}

基本上相当于

e.style.strokeDashoffset = e.style.strokeDashoffset - 10000;

因为循环不停地循环浏览所有迭代，而没有给浏览器更新页面的机会。

为了解决这个问题，请在循环中执行一个步骤，然后调用setTimeout（）告诉浏览器稍后返回我们，以便我们进行下一次迭代。

var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();

element.style.strokeDasharray = pathLength;
element.style.strokeDashoffset = pathLength;

function animateRoute(e, len) 
{
  // Each step we decrement the dash offset
  len -= 10;
  if (len < 0)
    len = 0;  // clamp to minimum 0

  element.style.strokeDashoffset = len;

  // We need to stop looping when the length gets to 0
  if (len > 0) {
    // Do another step
    setTimeout(function() { animateRoute(e, len); }, 10);
  }
}

animateRoute(element, pathLength);

<svg viewBox="-10 -10 420 120">
  
    <path id="animpath" d="M 0 0 L 400 10 0 20 400 30 0 40 400 50 0 60 400 70 0 80 400 90 0 100"
          stroke="black" stroke-width="3" fill="none"/>
  
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。