場景：假設想實現一個“曲線／直線”上面的“方點”按照這個軌跡來回滾動如何操作？
圖片上用紅色畫筆的線，這種svg 怎麼畫呢？想了半天，先是想到讓 UI 出個 gif 的圖片。放到位置上。後來一想覺得這個方法不行，萬一 UI 沒時間呢，多麻煩。
不廢話，突然想到在線生成 svg ，然後把源碼 摳下來，路徑有了下面有好弄了。。。
1､在線生成 svg： https://svg.wxeditor.com/
2､用畫筆畫線，然後查看源代碼。
3､用 svg 畫線。
紅色文字：線路徑 和 流動的點 保持一致。（也就是 svg 在線生成中的 路徑）
洋紅文字：流動的點 循環。（屬性）
代碼如下：放到 html 中運行即可。
|
<svg width="580" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <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> <rect id="ant" x="0" y="0" width="10" height="10" fill="pink"/> </svg> |
4､效果圖：載了個靜態的圖。
