SVG中間マーカーの位置と角度

Question

SVGパスの各ステップで矢印を表示するには中央マーカーを使用していますが、矢印は各パスセグメントの終点ではなく接合点で回転して表示されます。あたかも各パスセグメントが別の行にあるかのように描画したいと思います。

これを達成する簡単な方法はありますか？問題を示す

例：

<svg width="500px" height="500px"> 
    <defs> 
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" 
      orient="auto"> 
     <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" /> 
    </marker> 
    </defs> 

    <path d="M100,10 L150,10 L150,60 L100,60" 
     style="stroke: #6666ff; stroke-width: 1px; fill: none; 
       marker-mid: url(#markerArrow); 
       marker-end: url(#markerArrow); 
       " 
     /> 
</svg> 

https://jsfiddle.net/hztgzjyg/1

感謝

Answer 1

mid-markerを45度回転させる必要があり、これはa referenceとdemoです！

<svg width="500px" height="500px"> 
<defs> 
    <marker id="markerArrow" markerWidth="12" markerHeight="12" refX="6" refY="6" 
      orient="auto"> 
     <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #f00;" /> 
    </marker> 
</defs> 

<path d="M100,10 L150,10 L150,60 L100,60" 
     style="stroke: #6666ff; stroke-width: 1px; fill: none; 
        marker-start: url(#markerArrow); 
        marker-mid: url(#markerArrow); 
        marker-end: url(#markerArrow); 
       " 

     /> 
</svg> 

Answer 2

オリエント=自動角が半ばマーカーに対して別々に計算され、/エンドマーカーを開始しているので、あなたは、あなたの中のマーカーとエンドマーカーのための異なるマーカーを必要としています。この例はあなたが望むものを与えますが、もちろん、直角ポリラインでのみ機能します。これは、refX/Yとマーカーの描画が自動方向をオフセットしなければならないためです（角度の二等分に沿ってマーカーを向けるように設計されています）パスセグメントの各セット間）。

<svg width="500px" height="500px"> 
 
<defs> 
 
    <marker id="markerArrowMid" markerWidth="13" markerHeight="13" refX="13" refY="0" 
 
      orient="auto"> 
 
     
 
     <polygon points="0,6.5 6.5,13 13,0" fill="black" stroke-width="1" stroke="black" /> 
 
     
 
    </marker> 
 
    
 
     <marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="2" refY="6" 
 
      orient="auto"> 
 
     <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" /> 
 
    </marker> 
 
</defs> 
 

 
<path d="M100,10 L150,10 L150,60 L100,60" 
 
     style="stroke: #6666ff; stroke-width: 1; fill: none; 
 
        marker-mid: url(#markerArrowMid); 
 
        marker-end: url(#markerArrowEnd); 
 
       " 
 

 
     /> 
 
</svg>