svg 跟随鼠标滚轮移动

一 、 先让svg自己沿坐标移动

1 画一条svg路径

<!-- 
  d : 是path的路径参数 
  fill : 是svg文字 线 的填充色
  三次贝塞尔曲线 :cubic-bezier (x1,y1,x2,y2)   由起始点 , 终止点 , 两个中间点组成
-->
<path d="M0 0,C800 1000,0 2000.32,800 2800" fill="none" class="line" id='line1' />

2 定义动画 : 让svg路径的长度 发生改变 , 形成动画

    .line {
      /* 定义描边的虚线长度 */
      stroke-dasharray: 2963;
      /* 定义虚线描边的偏移量 */
      /* stroke-dashoffset: 0; */
      stroke: #ff7700;
      transition: all 0.5s;
      animation: starFill 3s;
      /* 线条粗细 */
      stroke-width: 10;
    }

    .line2 {
      transition: all 0s;
      stroke: rgb(0, 183, 255);
    }

    /* 定义线动画 */
    @keyframes starFill {
      0% {
        stroke-dashoffset: 2963;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }