Анимация пунктирной svg линии

230

06 апреля 2018, 15:05

Столкнулся с интересной проблемой, возможно ли сделать анимацию данной линии от начала до конца?

Поискал решения, есть решение нарисовать одну линию поверх другой и вторая линия в местах разрыва имеет фон такой же, как у секции и получается будто пунктир, но у меня фон градиентом, и что делать ?

Answer 1

Решение 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>

Answer 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>