javascript - 用一段生成 SVG 正弦波

Question

我目前正在尝试生成代表适合网页宽度的正弦波的 SVG 路径。

我目前使用的算法是在绘制正弦波的两点之间画一条小线。

算法:

for(var i = 0; i < options.w; i++) {
    var operator = ' M ';

    d += operator + ((i - 1) * rarity + origin.x) + ', ';
    d += (Math.sin(freq * (i - 1 + phase)) * amplitude + origin.y);

    if(operator !== ' L ') { operator = ' L '; }

    d += ' L ' + (i * rarity + origin.x) + ', ';
    d += (Math.sin(freq * (i + phase)) * amplitude + origin.y);
}

为 svg 生成路径:

M 9, 82.66854866662797 L 10, 102.5192336707523 
M 10, 102.5192336707523 L 11, 121.18508371540987 
M 11, 121.18508371540987 L 12, 129.88725786264592 
M 12, 129.88725786264592 L 13, 124.53298763579338 
M 13, 124.53298763579338 L 14, 107.64046998532105 
M 14, 107.64046998532105 L 15, 87.15451991511547 
M 15, 87.15451991511547 L 16, 72.70999984499424 
M 16, 72.70999984499424 L 17, 71.10039326578718 
M 17, 71.10039326578718 L 18, 83.08272330249196 
M 18, 83.08272330249196 L 19, 103.02151290977501

问题是，在窦的尽头我想画一条线来关闭路径的其余部分(用 Z)

对不起我的绘画技巧! :D关闭路径并链接路径的原因是能够用背景或渐变填充此路径

我发现我可以在链接的单个路径中表示正弦波

M0 50  C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50 Z

看起来像这样:

但问题是我使用的算法让我可以玩正弦函数，这样我就可以为这个波制作动画(这是我需要的东西)，但我不知道如何为正弦波的表示制作动画。

总而言之，你能帮我找到一种方法来链接实际算法绘制的所有线条吗？或在不关心窦的情况下为其他表示设置动画以绘制波浪的方法。

在此先感谢您的帮助!

Answer 1

只需将路径设置为两个波长的宽度，然后向左或向右移动，即可为正弦波设置动画。

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <path id="double-wave"
          d="M0 50
             C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50
             C 240 10, 260 10, 300 50 C 340 90, 360 90, 400 50
             L 400 100 L 0 100 Z" />
  </defs>

  <use xlink:href="#double-wave" x="0" y="0">
    <animate attributeName="x" from="0" to="-200" dur="3s"
             repeatCount="indefinite"/>
  </use>
</svg>

我正在为 x 制作动画<use> 的属性在这里是因为 IMO 更清楚发生了什么。

我们正在做的是为渲染我们的双波长路径的位置设置动画。一旦它移动了一个波长的距离，它就会跳回原来的位置并重复。效果是无缝的，因为两个波形是相同的。波浪的其余部分超出了 SVG 的边缘。

如果您想查看场景背后的情况，我们可以让 SVG 变宽，这样您就可以看到原始 SVG 左右两侧发生的情况。

<svg width="400" height="100" viewBox="-200 0 600 100">
  <defs>
    <path id="double-wave"
          d="M0 50
             C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50
             C 240 10, 260 10, 300 50 C 340 90, 360 90, 400 50
             L 400 100 L 0 100 Z" />
  </defs>

  <use xlink:href="#double-wave" x="0" y="0">
    <animate attributeName="x" from="0" to="-200" dur="3s"
             repeatCount="indefinite"/>
  </use>
  
  <rect width="200" height="100" fill="none" stroke="red" stroke-width="2"/>
</svg>