主页 / 问题 / 809296
Accepted
YourDeveloper
Asked:2020-04-04 16:29:47 +0000 UTC2020-04-04 16:29:47 +0000 UTC

虚线 svg 线动画

  • 772

面对一个有趣的问题，是否可以为给定的行从头到尾制作动画？

我寻找解决方案，有一种解决方案是在另一条线之上绘制一条线，并且断点处的第二条线与该部分具有相同的背景，结果就像一个虚线，但我有一个渐变背景，并且我应该怎么办？

在此处输入图像描述

html

3 个回答

  1. Best Answer

    SVG 解决方案

    该解决方案是自适应的，适用于除 IE、Edge 之外的所有现代浏览器；

    #rect1 {
fill:url(#Grad1);
}
#str{
stroke-dasharray:10 20;
stroke-dashoffset:900px; 
fill:none;
stroke:white;
stroke-width:4;
}
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"  viewBox="0 0 1920 715"> 
<defs>
<linearGradient id="Grad1"  gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00ADB3" />
		 <stop offset="100%" stop-color="#01CEAD" />
      </linearGradient>
</defs>
	
<rect id="rect1" width="100%" height="100%"   />
<path id="str" d="m227.3 703.4c0 0 100.3-73.4 157.7-95.1 64.7-24.4 135.1-32.9 204.1-37.1 65.7-4 131.4 14.8 197.1 11.6 59.4-2.9 122.5-2.4 176.3-27.8 43.1-20.4 70.9-63.7 106.7-95.1 33.8-29.6 32.3-50 102-88.1 44.4-24.3 97.8-32.9 148.4-32.5 55.3 0.5 110.7 11.7 162.3-11.6 44-19.9 86.7-44.6 122.9-76.5 32.2-28.3 50.7-69.5 81.2-99.7 24.6-24.4 50.2-49.3 81.2-64.9 35-17.6 113.6-30.2 113.6-30.2l0 0">
<animate attributeName="stroke-dashoffset" values="900;0" dur="5s" repeatCount="indefinite" />
</path>
</svg>

    • 5

  2. CSS 解决方案

    Path与 SVG 解决方案相同，因为 CSS 还没有绘制曲线的能力。但是动画是用规则实现的CSS 

    #rect1 {
fill:url(#Grad1);
}
#str{
stroke-dasharray:10 20;
stroke-dashoffset:900px; 
fill:none;
stroke:white;
stroke-width:4;
animation: dash 8s forwards infinite;
}
@keyframes dash {
  0% { 
    stroke-dashoffset: 900px;
  }
   50% { 
    stroke-dashoffset: 450px;
  }
  
  100% {
    stroke-dashoffset: 0px;
  }
}
 
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"  viewBox="0 0 1920 715"> 
<defs>
<linearGradient id="Grad1"  gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00ADB3" />
		 <stop offset="100%" stop-color="#01CEAD" />
      </linearGradient>
</defs>
	
<rect id="rect1" width="100%" height="100%"   />
<path id="str" d="m227.3 703.4c0 0 100.3-73.4 157.7-95.1 64.7-24.4 135.1-32.9 204.1-37.1 65.7-4 131.4 14.8 197.1 11.6 59.4-2.9 122.5-2.4 176.3-27.8 43.1-20.4 70.9-63.7 106.7-95.1 33.8-29.6 32.3-50 102-88.1 44.4-24.3 97.8-32.9 148.4-32.5 55.3 0.5 110.7 11.7 162.3-11.6 44-19.9 86.7-44.6 122.9-76.5 32.2-28.3 50.7-69.5 81.2-99.7 24.6-24.4 50.2-49.3 81.2-64.9 35-17.6 113.6-30.2 113.6-30.2l0 0">
</path>
</svg>

    • 4

  3. 尝试为stroke-dashoffset. 您可以在这里尝试一个示例。

    • 1

相关问题