SVG：动态曲线图

场景：假设想实现一个“曲线／直线”上面的“方点”按照这个轨迹来回滚动如何操作？

图片上用红色画笔的线，这种svg 怎么画呢？想了半天，先是想到让 UI 出个 gif 的图片。放到位置上。后来一想觉得这个方法不行，万一 UI 没时间呢，多麻烦。

不废话，突然想到在线生成 svg ，然后把源码抠下来，路径有了下面有好弄了。。。

1､在线生成 svg： https://svg.wxeditor.com/

2､用画笔画线，然后查看源代码。

3､用 svg 画线。

红色文字：线路径和流动的点保持一致。（也就是 svg 在线生成中的路径）

洋红文字：流动的点循环。（属性）

代码如下：放到 html 中运行即可。

<path fill="none" stroke="#000" stroke-width="1.5" id="svg_1"

d="m61.5,229.10938c0,0 1.0883,-0.24762 7,2c7.11863,2.7065 12.894,6.48584 21,8c7.92518,1.48038 13.01363,1.32993 17,1c6.06203,-0.50171 11.13881,-3.81116 18,-9c10.21423,-7.72461 20.75101,-18.34496 32,-32c11.82713,-14.35684 24.75259,-37.16994 31,-46c5.77573,-8.16339 9.38687,-12.9176 12,-14c0.92387,-0.38269 3.134,-1.02667 7,0c7.79218,2.06932 23.65591,15.26869 36,27c15.89764,15.10844 32.68372,35.53387 40,47c5.53806,8.67929 9.35577,15.76016 16,26c3.17389,4.89148 7.29361,10.7265 11,15c3.276,3.77728 5.87857,5.49347 9,6c2.96127,0.48056 9.608,1.02737 22,-7c13.76538,-8.91705 28.66162,-21.49384 40,-37c21.28186,-29.10468 30.62177,-48.82242 43,-68c5.423,-8.40186 9.54916,-14.95517 13,-16c0.95709,-0.28978 2.00754,-0.21266 5,0c7.05328,0.50127 19.46689,5.12744 35,14c17.58228,10.04306 30.62549,21.78317 40,36c7.38562,11.20056 9.78735,19.74748 12,28c1.57526,5.87524 3,10 4,14c1,4 2,7 2,10l0,0l0,1" stroke-dasharray="2,2"/>

<!-- <path

d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"

stroke="black"

fill="transparent"

stroke-dasharray="14.05 14.05"

stroke-dashoffset="91.68"

/> -->

<animateMotion

xlink:href="#ant"

path="m61.5,229.10938c0,0 1.0883,-0.24762 7,2c7.11863,2.7065 12.894,6.48584 21,8c7.92518,1.48038 13.01363,1.32993 17,1c6.06203,-0.50171 11.13881,-3.81116 18,-9c10.21423,-7.72461 20.75101,-18.34496 32,-32c11.82713,-14.35684 24.75259,-37.16994 31,-46c5.77573,-8.16339 9.38687,-12.9176 12,-14c0.92387,-0.38269 3.134,-1.02667 7,0c7.79218,2.06932 23.65591,15.26869 36,27c15.89764,15.10844 32.68372,35.53387 40,47c5.53806,8.67929 9.35577,15.76016 16,26c3.17389,4.89148 7.29361,10.7265 11,15c3.276,3.77728 5.87857,5.49347 9,6c2.96127,0.48056 9.608,1.02737 22,-7c13.76538,-8.91705 28.66162,-21.49384 40,-37c21.28186,-29.10468 30.62177,-48.82242 43,-68c5.423,-8.40186 9.54916,-14.95517 13,-16c0.95709,-0.28978 2.00754,-0.21266 5,0c7.05328,0.50127 19.46689,5.12744 35,14c17.58228,10.04306 30.62549,21.78317 40,36c7.38562,11.20056 9.78735,19.74748 12,28c1.57526,5.87524 3,10 4,14c1,4 2,7 2,10l0,0l0,1"

dur="10s"

begin="0s"

rotate="auto-reverse"

fill="freeze"

repeatCount="indefinite"

</animateMotion>

</svg>

4､效果图：载了个静态的图。