DevToolBox

SVG矢印マーカージェネレーター

SVGパスの両端に矢印を追加するmarker要素を生成。marker-start/mid/endに対応。

<marker
  id="arrow-t-end"
  markerWidth="6"
  markerHeight="6"
  refX="6"
  refY="3"
  orient="auto"
  markerUnits="strokeWidth">
  <polygon points="0,0 6,3 0,6" fill="#3b82f6" />
</marker>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
  id="arrow-t-end"
  markerWidth="6"
  markerHeight="6"
  refX="6"
  refY="3"
  orient="auto"
  markerUnits="strokeWidth">
  <polygon points="0,0 6,3 0,6" fill="#3b82f6" />
</marker>
  </defs>
  <path
    d="M 50 100 L 200 50 L 350 100"
    stroke="#3b82f6"
    stroke-width="2"
    fill="none"
    
    marker-end="url(#arrow-t-end)" />
</svg>

SVGマーカーについて

SVGの marker 要素は、パス、ライン、ポリラインの終点や頂点にグラフィックを配置するために使用されます。 矢印、点、その他の装飾を自動的に配置できます。

マーカーの配置

  • marker-start: パスの始点に配置
  • marker-mid: パスの各頂点に配置
  • marker-end: パスの終点に配置

主な使用例

  • フローチャート・ダイアグラムの矢印
  • 接続線・リレーション表示
  • 方向指示・ベクトル表現
  • アニメーション付きパス装飾