<marker>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<marker> SVG 元素定義了一個圖形，用於在給定的 <path>、<line>、<polyline> 或 <polygon> 元素上繪製箭頭或多邊形標記。

可以使用 marker-start、marker-mid 和 marker-end 屬性將標記附加到形狀上。

使用語境

分類	容器元素
允許內容	可包含任意數量、任意順序的下列元素動畫元素描述性元素形狀元素結構元素漸變元素 `<a>`、`<clipPath>`、`<filter>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`

屬性

標記高度: 此屬性定義標記視口的高度。值型別：<length>；預設值：3；可動畫：是
標記單位: 此屬性定義 markerWidth、markerHeight 屬性以及 <marker> 內容的座標系。值型別：userSpaceOnUse | strokeWidth；預設值：strokeWidth；可動畫：是
標記寬度: 此屬性定義標記視口的寬度。值型別：<length>；預設值：3；可動畫：是
orient: 此屬性定義標記相對於其所附加形狀的方向。值型別：auto | auto-start-reverse | <angle>；預設值：0；可動畫：是
保持長寬比: 此屬性定義如果 SVG 片段嵌入到具有不同縱橫比的容器中，則必須如何變形。值型別：(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?；預設值：xMidYMid meet；可動畫：是
refX: 此屬性定義標記參考點的 x 座標。值型別：left | center | right | <coordinate>；預設值：0；可動畫：是
refY: 此屬性定義標記參考點的 y 座標。值型別：top | center | bottom | <coordinate>；預設值：0；可動畫：是
檢視框: 此屬性定義當前 SVG 片段的 SVG 視口的邊界。值型別：<list-of-numbers>；預設值：none；可動畫：是

DOM 介面

此元素實現了 SVGMarkerElement 介面。

示例

繪製箭頭

以下示例顯示瞭如何在直線和曲線路徑上繪製箭頭。對於曲線路徑，將在每個點處使用 marker-mid 標記繪製箭頭。

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

html

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <!-- A line with a marker -->
  <line
    x1="10"
    y1="10"
    x2="90"
    y2="90"
    stroke="black"
    marker-end="url(#arrow)" />

  <!-- A curved path with markers -->
  <path
    d="M 110 10
       C 120 20, 130 20, 140 10
       C 150 0, 160 0, 170 10
       C 180 20, 190 20, 200 10"
    stroke="black"
    fill="none"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>

繪製多邊形標記

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Arrowhead marker definition -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- Dot marker definition -->
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Coordinate axes with an arrowhead in both directions -->
  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <!-- Data line with polymarkers -->
  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

使用上下文填充和描邊

以下示例顯示瞭如何使用 context-fill 和 context-stroke 值使標記使用與其所附加形狀相同的填充和描邊。

html

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
    id="circle"
    markerWidth="6"
    markerHeight="6"
    refX="3"
    refY="3"
    markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
    path {
      marker: url("#circle");
    }
  </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>

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

規範

規範
Scalable Vector Graphics (SVG) 2 # MarkerElement

瀏覽器相容性

另見

相關的標記屬性：marker-start、marker-mid 和 marker-end

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年8月5日⁩，由 MDN 貢獻者編輯。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤