如何繪製SVG中不是三角形的標記？

Question

例如，像這樣的矩形標記

Answer 1

使用在<def>的<marker>元件。然後，您可以通過參考marker-start="url(#id)"（或使用marker-mid或marker-end）的id來在開始和結束處添加標記。您可以在標記標記內定義任何你喜歡的形狀。下面的例子只是一個垂直線，就像你的例子。

<defs> 
    <marker id="marker-bar" 
      refX="0" refY="5" 
      markerHeight="20" 
      markerWidth="20" 
      viewBox="0 0 10 10" 
      orient="auto" 
      markerUnits="strokeWidth"> 
     <path stroke="#111" d="M0 0 v10"/> 
    </marker> 
</defs> 

<path stroke="#111" fill="none" 
     d="M152,172 C62,174 190,28 192,122" 
     marker-end="url(#marker-bar)"/>