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: パスの終点に配置
主な使用例
- フローチャート・ダイアグラムの矢印
- 接続線・リレーション表示
- 方向指示・ベクトル表現
- アニメーション付きパス装飾