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>