绘制SVG路径的最简单方法

我从这里尝试了以下的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如下：

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

有人可以建议一个解决方案或建议一个很好的方法来动画svg路径没有大量无用的代码？

Answer 1

CSS-Tricks最近写了一篇关于此的文章 ：

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

小提琴

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