动画虚线重叠图像

Question

目标：我希望我的虚线从左到右画出，x出现在最后。此外，此虚线将显示在像这样的图形的顶部

我在codepen 1上找到了这个示例：https://codepen.io/Evgeny/pen/IEGoq?editors=1100

我尝试在每条路径上添加路径和破折号类，但是我没有达到预期的效果。应该用jquery还是css完成？

这是我的codepen https://codepen.io/drunktuts/pen/aENxXj

CSS看起来像这样

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

您没有将.path类添加到svg路径中。看看这个片段。

CODEPEN

.dashed{
  stroke-dasharray: 10;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: -1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.target{
  transform: scale(0);
  transform-origin: center center;
  animation: target 0.5s linear 5s forwards;
}
@keyframes target {
  to {
    transform: scale(1)
  }
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="500px" height="143px" viewBox="0 0 500 143" enable-background="new 0 0 500 143" xml:space="preserve">
<g>
	<g>
	
    
		<path fill="none" class="path" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" d="M26.565,96.941
			c-1.063,1.702-2.094,3.422-3.107,5.133"/>
    <path fill="none" class="path" stroke="#74C044" stroke-width="6" stroke-linejoin="round" stroke-miterlimit="10" d="
			M427.313,82.577c-17.631,4.149-35.389,7.943-53.32,10.265c-13.979,1.809-28.369,2.609-42.179-0.789
			c-13.539-3.332-25.266-10.732-37.272-17.511c-13.105-7.397-27.067-14.075-42.434-14.208c-16.547-0.145-31.171,7.534-44.262,16.99
			c-12.877,9.301-25.034,21.473-40.702,25.904c-16.987,4.805-34.102-1.76-49.501-8.68c-18.202-8.18-38.376-21.523-59.076-21.017
			c-13.246,0.324-21.792,8.483-28.671,18.342"/>
    <path fill="none" class="dashed" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="
			M427.313,82.577c-17.631,4.149-35.389,7.943-53.32,10.265c-13.979,1.809-28.369,2.609-42.179-0.789
			c-13.539-3.332-25.266-10.732-37.272-17.511c-13.105-7.397-27.067-14.075-42.434-14.208c-16.547-0.145-31.171,7.534-44.262,16.99
			c-12.877,9.301-25.034,21.473-40.702,25.904c-16.987,4.805-34.102-1.76-49.501-8.68c-18.202-8.18-38.376-21.523-59.076-21.017
			c-13.246,0.324-21.792,8.483-28.671,18.342"/>
    

	</g>
</g>
<g>
	<path fill="none" class="target" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M457.573,57.77c0.282,2.831,23.33,30.967,19.774,26.554"/>
	<path fill="none" class="target" stroke="#74C044" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M451.367,86.115c4.507-6.301,10.893-11.801,16.509-17.084c4.374-4.116,9.634-7.09,13.991-11.166"/>
</g>
</svg>