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が半径10 pxの円であれば、接続された要素の影響を受けずに10 pxの半径になります.:refX=「markeX[idx]」はrefXの値を変更し、pathでの矢印の位置2、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を抜き、単純に線分を描きます