如何给SVG的path加上箭头以及动态改变方向

在 元素中定义的图形不会直接显示在SVG图像上
一、所以先来定义出 箭头的图形：

<defs>
    <marker id=‘markerArrow‘ markerWidth=‘13‘ markerHeight=‘13‘ refx=‘2‘ refy=‘6‘ orient=‘auto‘>
        <path d=‘M2,2 L2,11 L10,6 L2,2‘ style=‘fill:#00ff00‘ />
    </marker>
</defs>

注：
1、orient=“auto” 这个属性，箭头的方向会自动适应线条的方向。
2、refX和refY，指的是图形元素和marker连接的位置坐标。
3、markerUNits，用于确定marker是否进行缩放。它定义了markerWidth和markerHeight，以及marker的内容本身的坐标系统。
4、strokeWidth:坐标系统中的marker值和当前描边宽度的单位是相同的尺寸。也就是说strokeWidth这个值允许你的marker缩放。
userSpaceOnUse: marker的值是当前用户坐标系统的值。也就是说如果你的marker是一个半径为10px的圆，它就一直都是10px的半径，不受连接的元素的影响。
:refX=“markeX[idx]”
改变refX的值， 可以改变箭头在path中的位置
二、 引用
marker-end=“url(#idArrow)”

<g class="paths" v-for="p, idx in paths" >
        <path
          :d="p.data"
          stroke-width="2"
          stroke="#9BA6B1"
          fill="none"
          :marker-end="'url(#idArrow'+idx+')'" >
        </path>
      </g>

三、可拖动踩坑
orient=“auto” 这个属性，箭头的方向会自动适应线条的方向。
但是当我的数据处理， 拖动的线段使用 Q时， 即使我的数据处理 为一条直线了（x 相等 或 y相等了），箭头的方向只能上下而不能左右；

 const data = `M ${px} ${py} L ${qx} ${qy} Q ${cx} ${cy}, ${rx} ${ry} L ${sx} ${sy}`;

这里踩坑的经验是！：
只要使用了Q，即使数据与图形都是直线了，还是会影响，正确的做法是直线时，去掉Q，就单纯画线段