html - 如何在 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 处的线开始动画

标签： htmlsvgpath

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>