以圆角矩形的四分之一为例！

                                                          

1. 确定容器首先先找到你的加载容器（确定你容器的宽高 ）  ，然后插入svg元素并确定宽高            

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.setAttribute('width', '100%');

svg.setAttribute('height', '100%');

$("#containerSVG").append(this.svg);

2.确定坐标点需要最少相对于父容器的四个坐标点  这样的四个点 比如（但实际情况肯定需要自己根据需求去计算坐标）

var obj = {  

    start:{left: "10px",top: "10px"},

    yuanStart:{left: "10px",top: "100px"},

    yuanEnd:{left: "40px",top: "130px"},

    end:{left: "130px",top: "130px"},
 },

        

3.画线

如上图，先直线   再曲线   再直线。

直线好画，曲线的话选择path 标签的贝塞尔曲线 Q 指令绘制弧线。

   曲线 已有起始坐标和结束坐标 ，再通过计算得到控制点，这个控制点坐标可以根据想要的弧度去计算 这里有一个从别人那里偷来的函数可以学下下

function getPosition(start, end, angle) {

    var x1 = start.left;
    var y1 = start.top;
    var x2 = end.left;
    var y2 = end.top;
    var PI = Math.PI;

    // 两点间的x轴夹角弧度
    var xAngle = Math.atan2((y2 - y1), (x2 - x1));
    // 转为角度
    xAngle = 360 * xAngle / (2 * PI);
    // 两点间的长度
    var L = Math.sqrt((y2 - y1) * (y2 - y1) + (x2 - x1) * (x2 - x1));
    // 计算等腰三角形斜边长度
    var L2 = L / 2 / Math.cos(angle * 2 * PI / 360);

    // 求第一个顶点坐标，位于下边
    var val1 = {};
    // 求第二个顶点坐标，位于上边
    var val2 = {};
    val1['left'] = x1 + Math.round(L2 * Math.cos((xAngle + angle) * 2 * PI / 360));
    val1['top'] = y1 + Math.round(L2 * Math.sin((xAngle + angle) * 2 * PI / 360));
    val2['left'] = x1 + Math.round(L2 * Math.cos((xAngle - angle) * 2 * PI / 360));
    val2['top'] = y1 + Math.round(L2 * Math.sin((xAngle - angle) * 2 * PI / 360));

    return [val1, val2];
  }

这个方法返回值有两个，上图你就明白了（ 参考学习自这里的）

  好了现在坐标点都确定了就正式开始划线了

   var start = obj.start;
   var end = obj.end;

   //  整体的出发点start 
   var startM = 'M' + start['left']+' ' + start['top'];

    //直线连接到圆弧的起点yuanStart 然后链接圆弧
   var startL =  'L' + obj.yuanStart['left']+' ' + obj.yuanStart['top']      
  
   // 画弧形
   var pos = getPosition(obj.yuanStart, obj.yuanEnd, 40);//这个控制点有上下两个，可以都试一下

   var arcQ =' '+ 'Q' + pos[0]['left']+' ' + pos[0]['top'];
       arcQ +=' '+ obj.yuanEnd['left']+' ' + obj.yuanEnd['top'];
   // 确定尾
   var endL = 'L'+obj.end['left'] + ' ' + obj.end['top'];


   //----插入页面中
   var color = '#6FFAFF';
   var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   path.setAttribute("d",  [startM , startL ,arcQ , endL,].join(' '));
   path.setAttribute('stroke', color);
   path.setAttribute('fill', 'none');
   // path.setAttribute('stroke-dasharray', '7');
   path.setAttribute('stroke-width', '2px');
   svg.append(path);

然后就可以看到你的曲线了！具体什么颜色，粗细，线条样式都可设置

4. 创建飞行物随轨迹运动

// -------创建飞行的箭头！
   var div = document.createElement('div');
   div.innerHTML = '<img src="../../../static/images/fileTransfer/piu2.png">';
    //给div加个宽高背景色就能看到效果  搞个图片好看些也能自己写个箭头
   div.className = "flyJ"; 
   $("#containerSVG").append(div);
   // 结合曲线让箭头动起来
    var len = path.getTotalLength();
    var start = performance.now();
    var len = path.getTotalLength();
    var old = {}
    var theta = 0;
    function frame() {
        var now = performance.now();
        var phase = ((now - start) / 2000) % 1;
        var point = path.getPointAtLength(len * phase);
        if(old.x){
           var angle = Math.atan2((point.y-old.y), (point.x-old.x)) //弧度
           theta = angle*(180/Math.PI); //角度  
        };
        div.style.transform = 'translate3d(' + point.x + 'px,' + point.y + 'px,0) rotateZ('+theta+'deg)'; 

        old = point;
        requestAnimationFrame(frame);
    };
    frame();

然后就完成了！

我也是在网上看别人文章学的，这里附上链接表示感谢https://www.cnblogs.com/linx/p/12699687.html

关于物体获取轨迹坐标运动的可以参考这个博客 他的代码复制完就能直接出效果，很舒服https://www.cnblogs.com/xiaozhumaopao/p/12152043.html