SVG连续线加载器动画

Question

我有以下SVG行：

svg#line_loader {
	position: relative; float: left; clear: none; display: block;
	width: 100%; height: 8px; margin: 0; padding: 0;
	stroke: rgb(255, 205, 0);
	
	stroke-width: 10; stroke-linecap: round;

	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	
	animation: dash 1s linear forwards infinite;
}

@keyframes dash {
  0%   { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 100; }
}

<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>

但是，动画最终看起来参差不齐。

看看：jsFiddle

Answer 1

您需要每次迭代都以相同的开始位置结束。这意味着偏移量应为100%，而破折号应为容器宽度的百分比：

svg#line_loader {
	position: relative; clear: none; display: block;
	width: 100%; height: 8px; margin: 0; padding: 0;
	stroke: rgb(255, 205, 0);
	
	stroke-width: 10; stroke-linecap: round;

	stroke-dasharray: 25%;
	
	 animation: dash 1s linear forwards infinite;
}

@keyframes dash {
  0%   { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 100%; }
}

<svg id="line_loader"><line x1="100%" y1="0%" x2="0%" y2="0%"></line></svg>