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;
  }
}

...如您所见，第一条路径仅画了一条线，然后我想移至第二条线的起点（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>

如何在SVG标签中有2条单独的线，一条线接另一条线？

1 个答案:

CSS动画