绘制SVG路径的最简单方法(Simplest way to draw an SVG path)

 我从这里尝试了以下的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路径没有大量无用的代码？ 

I tried the following tutiroal from here: 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 is as following:
 
<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"
/>
 
The thing is when I use it in Firefox, it works. But if I go for Chrome, the animation freezes at something like 75% and instantly jumps to 100% in like 30s. I've noticed, that the animation doesn't freeze only in one case - if I use stroke-dashoffset 530ms ease-out, i.e. 530ms or less.
 
Could someone suggest a solution for that or recommend a good way to animate an svg path without tons of useless code?

原文：https://stackoverflow.com/questions/26640478