選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG <marker>


SVG Marker - <marker>

<marker> 元素用於建立 <line><path><polyline><polygon> 的起始、中間和結束標記。

所有 SVG 標記都定義在 <defs> 元素內。<defs> 元素是“definitions”的縮寫,包含特殊元素的定義(例如標記)。

標記透過 marker-startmarker-midmarker-end 屬性附加到形狀上。

<marker> 元素有六個基本屬性來定位和設定標記的大小

Attribute 描述
id 標記的唯一 ID
markerHeight 標記的高度。預設為 3
markerWidth 標記的寬度。預設為 3
refX 標記與頂點連線的 x 位置。預設為 0
refY 標記與頂點連線的 y 位置。預設為 0
orient 標記相對於其附加形狀的方向。可以是 "auto"、"auto-start-reverse" 或一個角度。預設為 0

帶起始和結束標記的線條

以下示例建立了一條帶有圓形起始標記和箭頭結束標記的線

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="3" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />
</svg>
自己動手試一試 »

程式碼解釋

  • <defs> 元素包含兩個標記:一個 #circle 標記和一個 #arrow 標記
  • 標記的形狀定義在 <marker> 元素中
  • 第一個 <marker> 元素包含一個 <circle> 元素,用於繪製一個小圓
  • 第二個 <marker> 元素包含一個 <path> 元素,用於繪製一個小三角形
  • <line> 元素使用 marker-start 屬性和 marker-end 屬性引用了兩個標記


新增中間標記

以下示例建立了一個帶有起始標記、中間標記和結束標記的折線

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="2" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />
</svg>
自己動手試一試 »

程式碼解釋

  • <defs> 元素包含兩個標記:一個 #circle 標記和一個 #arrow 標記
  • 標記的形狀定義在 <marker> 元素中
  • 第一個 <marker> 元素包含一個 <circle> 元素,用於繪製一個小圓
  • 第二個 <marker> 元素包含一個 <path> 元素,用於繪製一個小三角形
  • <polyline> 元素使用 marker-start 屬性、marker-mid 屬性和 marker-end 屬性引用了兩個標記
  • 注意 marker-start 屬性和 marker-mid 屬性都指向同一個標記(#circle)。這樣標記就可以被重複使用多次

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援