文章
问答
冒泡
SVG:动态曲线图

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



图片上用红色画笔的线,这种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、效果图:载了个静态的图。



关于作者

兜兜
获得点赞
文章被阅读