marker-start

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

marker-start 属性は、指定された図形の最初の頂点に描画される矢印またはポリマーカーを定義します。

<polyline> および <path> を除くすべての図形要素において、最後の頂点は最初の頂点と同じになります。この場合、marker-start および marker-end の値がいずれも none でない場合、その最後の頂点に 2 つのマーカーが描画されます。<path> 要素の場合、それぞれの閉じられたサブパスにおいて、最後の頂点は最初の頂点と同じになります。marker-start は、パスデータの最初の頂点にのみ描画されます。

メモ: プレゼンテーション属性であるため、marker-start には対応する CSS プロパティ marker-start があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は以下の SVG 要素で使用できます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="triangle"
      viewBox="0 0 10 10"
      refX="1"
      refY="5"
      markerUnits="strokeWidth"
      markerWidth="10"
      markerHeight="10"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>
  <polyline
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20"
    marker-start="url(#triangle)" />
</svg>