来自波浪线SVG的连续波浪状动画 [英] Continuous wave like animation from wave line svg

问题描述

您好，我有一个svg，它是用adobe illustrator构建的波浪线，我正在尝试向其中添加连续波，例如动画.

Hello I have an svg that is a wavy line built with adobe illustrator and I'm trying to add a continuous wave like animation to it.

我尝试了vivus.js并能够使绘制动画正常工作，但并不能连续工作.

I've tried vivus.js and was able to get the draw animation working but not coninuously.

有人对如何开始这样的事情有想法吗?我不希望有人为我解决问题，而是将我指向正确的方向，尽管如果有人快速回答，我也不反对.

Does anyone have an idea on how to start something like this? I don't expect someone to do the problem for me but instead point me to the right direction, although im not opposed if someone has a quick answer.

无论答案是纯CSS还是JS都可以使用.

Any answer will work wether its pure css, js or both.

这是svg

<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
    <path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
    c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
    c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
    c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
    c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
    c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>

和jsfiddle链接

and the jsfiddle link

此处

谢谢！

推荐答案

我希望这会对您有所帮助.稍微播放一下这些值，或将SVG波添加为背景，重复此操作并更改background-position.

I hope this will help you. Play a little bit with the values or add the SVG wave as background, repeat it and change the background-position.

@keyframes wave {
  0% { 
    left: -80px; 
  }
  100% { 
    left: 0; 
  }
}

.container {
  width: 100px;
  overflow: hidden;
}
.container svg {
  position: relative;
  left: -50px;
  width: 200px;
  animation: wave 2s linear infinite;
}

<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
    <path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
	c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
	c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
	c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
    c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
	c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>

这篇关于来自波浪线SVG的连续波浪状动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！