SVGストロークラインキャップをカスタマイズする方法

Question

誰かがSVGストロークラインカットにカスタムシェイプを作成しようとしたかどうかを知りたいと思います。標準（丸い、正方形）の代わりに、私はカウントダウンタイマーのパス上に逆の半円を作成したいと思います。 SVG /でこれが可能かどうか私に教えてください。 よろしく スレシュ

Answer 1

ロバートは、あなたがラインにカスタムエンドキャップを追加するために、marker-endで、<marker>を使用することができ、示唆したように。

<svg> 
 
    
 
    <defs> 
 
    <marker id="InverseSemicircleEnd" 
 
     viewBox="0 0 5 10" refX="0" refY="5" 
 
     markerUnits="strokeWidth" 
 
     markerWidth="0.5" markerHeight="1" 
 
     orient="auto"> 
 
     <path d="M 0 0 L 5 0 A 5 5 0 0 0 5 10 L 0 10 z" /> 
 
    </marker> 
 
    </defs> 
 
    
 
    <line y1="75" x2="270" y2="75" 
 
     fill="none" stroke="black" stroke-width="40" 
 
     marker-end="url(#InverseSemicircleEnd)" /> 
 
</svg>