跳轉到

建立 2026-09-14 更新 2026-09-14

基本形狀與填描邊

先用內建形狀，不要一開始就寫 path。屬性記的是幾何（位置、大小）加上外觀（fill、stroke）。

矩形、圓、橢圓

<svg width="360" height="140" viewBox="0 0 360 140" xmlns="http://www.w3.org/2000/svg">
  <rect x="16" y="24" width="100" height="80" rx="12" fill="#4051b5"/>
  <circle cx="180" cy="64" r="40" fill="#e25555"/>
  <ellipse cx="300" cy="64" rx="44" ry="28" fill="#2e7d32"/>
</svg>

<rect>：x y width height；rx / ry 做圓角
<circle>：cx cy 是圓心，r 是半徑
<ellipse>：rx、ry 分別是水平、垂直半徑

線、折線、多邊形

<svg width="360" height="120" viewBox="0 0 360 120" xmlns="http://www.w3.org/2000/svg">
  <line x1="16" y1="20" x2="160" y2="100" stroke="#333" stroke-width="4"/>
  <polyline points="180,20 220,90 260,40 300,100"
            fill="none" stroke="#4051b5" stroke-width="4"/>
  <polygon points="320,20 350,100 290,100"
           fill="#ffcd39" stroke="#333" stroke-width="2"/>
</svg>

<line>：兩點連線，幾乎一定要設 stroke（預設 fill 對線沒幫助）
<polyline>：開口折線
<polygon>：自動閉合，適合三角形、標籤區塊

fill 與 stroke

屬性	作用	常用值
`fill`	內部顏色	`#4051b5`、`currentColor`、`none`
`stroke`	邊線顏色	同左
`stroke-width`	邊線粗細	`2`、`4`
`stroke-linecap`	線端	`butt`、`round`、`square`
`stroke-linejoin`	轉角	`miter`、`round`、`bevel`
`opacity` / `fill-opacity`	透明度	`0`–`1`

<rect x="20" y="20" width="120" height="60"
      fill="#4051b5" stroke="#1a237e" stroke-width="4" rx="8"/>

只要輪廓、不要填滿

折線與空心圖示設 fill="none"，否則瀏覽器可能用預設黑色把折線圍成奇怪的面。

後面的圖層（文字、箭頭）畫在 markup 後面，才會疊在上面。

進一步學習