如何在 SVG 标签中有 2 行单独的行，一行接着一行动画

Question

我的html文件中有一个SVG标签，我有坐标，我想基本上对一条路径进行动画处理，当它完成后，对第二条路径进行动画处理。但是两条路径同时开始动画，我不确定为什么。

我尝试将坐标放在路径中，M移动然后L移动线条，然后另一个M，我认为可以开始第二条路径，依此类推。

这是我的道路：

<defs>
<path id="path1" d="M1400 1520 L1260 1480 M1280 480 L1110 460 L1060 260 L1180 240 " />
<mask id="mask1"><use class="mask" xlink:href="#path1"></mask>
</defs>
<use class="paths" xlink:href="#path1" mask="url(#mask1)" />

以下是动画.css：

.paths {
  fill: none;
  stroke: black;
  stroke-dasharray: 12;
  stroke-width: 5;
  stroke-linejoin: round;
}
.mask {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}
/* does not work in IE, need JS to animate there */
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

。如您所见，第一条路径只画了 1 条线，然后我想移动到第二条线 (M1280( 的开头，但由于某种原因，一旦 M1400 处的线开始动画

Answer 1

要分别对两条线进行动画处理，您需要将公共路径分为两条路径：

<path id="path1" fill="none" stroke="black"  d="M1400 1520 L1260 1480" /> 
<path id="path2" fill="none" stroke="red" d="M1280 480 L1110 460 L1060 260 L1180 240" />  

为了查看这些行，我使用了命令transform = "translate (x y)"
您可以根据需要指定用于定位的坐标X Y。

若要对线条绘制进行动画处理，请使用 stroke-dashoffset 属性。

对于id = "path1"，线的长度为 148px
对于id = "path2"，线的长度是499px

第二行的动画在第一行的动画结束后开始begin ="an1.end"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="1800" height="1800" viewBox="0 0 1800 1800">
 <path id="path1" fill="none" stroke="black" stroke-width="5"
    transform="translate(-1100 -1200)"
	stroke-dashoffset="148"
	stroke-dasharray="148 148"  
    d="M1400 1520 L1260 1480" >
 <animate id="an1"
   attributeName="stroke-dashoffset"
   begin="0s;an2.end"
   dur="2s"
   values="148;0;148"
   fill="freeze" />
</path> 
 <path id="path2" fill="none" stroke="red" stroke-width="5"
     transform="translate(-1000 -220)"
	 stroke-dashoffset="499"
	 stroke-dasharray="499 499" 
		d="M1280 480 L1110 460 L1060 260 L1180 240" >
   <animate id="an2"
     attributeName="stroke-dashoffset"
	 begin="an1.end"
	 dur="2s"values="499;0;499"
	 from="499"
	 to="0"
	 fill="freeze" />
</path>	
</svg>

CSS动画

#path1 {
fill:none;
stroke:black;
stroke-width: 5;
stroke-linejoin: round;
stroke-dashoffset:148;
stroke-dasharray:148;
animation: dash1 1.5s linear alternate infinite;
}
@keyframes dash1 {
  from {
    stroke-dashoffset: 148;
  }
  to {
    stroke-dashoffset: 0;
  }
} 
#path2 {
fill:none;
stroke:red;
stroke-width: 5;
stroke-linejoin: round;
stroke-dashoffset:499;
stroke-dasharray:499;
animation: dash2 3s linear alternate infinite;
animation-delay:3s;
}
@keyframes dash2 {
  from {
    stroke-dashoffset: 499;
  }
  to {
    stroke-dashoffset: 0;
  }
} 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="1800" height="1800" viewBox="0 0 1800 1800">
 <path id="path1" transform="translate(-1100 -1200)" d="M1400 1520 L1260 1480" >
 </path> 
 <path id="path2"  transform="translate(-1000 -220)"
	 	d="M1280 480 L1110 460 L1060 260 L1180 240" >
 </path>	
</svg>