Question

我从这里尝试了以下的tutiroal：http://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.querySelector(".svg1");
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = "none";
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-out";
path.style.strokeDashoffset = 0;

HTML如下：

<path class="svg1" 
style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;"
d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103"
/>

问题是当我在Firefox中使用它时，它可以工作。但是，如果我选择使用Chrome，那么动画会以75％的速度冻结，并在30秒内立即跳至100％。我注意到，动画在一种情况下不会冻结 - 如果我使用stroke-dashoffset 530ms ease-out，即530ms或更短。

有人可以建议一个解决方案或推荐一个很好的方法来动画svg路径而不需要大量无用的代码吗？

Answer 1

CSS-Tricks recently wrote an article就此：

我们的想法是用虚线笔划设置我们的SVG形状，其中短划线长度是整个路径的长度。然后，我们使用动画将该路径长度偏移每个破折号。（Read the article）

<强> FIDDLE

.svg1 {
  stroke-dasharray: 822;
  stroke-dashoffset: 822;
  animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
  <path class="svg1" style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;" d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103" />
</svg>

那你怎么得到路径的长度？

上述文章也对此进行了介绍：

只需运行代码：

var path = document.querySelector('.svg1');
var length = path.getTotalLength();

绘制SVG路径的最简单方法

1 个答案:

那你怎么得到路径的长度？