基本形狀

大多數 SVG 繪製使用幾種基本形狀。這些形狀的用途從其名稱中可以很明顯地看出。其中一些確定其位置和大小的引數已經給出，但元素引用可能包含更準確和完整的描述，以及此處未涵蓋的其他屬性。但是，由於它們在大多數 SVG 文件中使用，因此有必要對它們進行某種介紹。

要插入形狀，您需要在文件中建立一個元素。不同的元素對應不同的形狀，並採用不同的引數來描述這些形狀的大小和位置。有些是略微冗餘的，因為它們可以透過其他形狀建立，但它們都存在是為了您的方便，並使您的 SVG 文件儘可能短和可讀。所有基本形狀都在下圖中顯示。

Succession of eight different shapes and drawings. At the top left, a black outline square follow by a black rounded outline square. Below at the left, a red outline circle follow by a red outline ellipse. Below at the left a yellow line, follow by a yellow zigzag. Below the yellow lines, a green outline star and at the end of the image a blue wavy line.

生成該影像的程式碼類似於以下程式碼

xml

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

注意：stroke、stroke-width 和 fill 屬性將在本教程後面的部分中解釋。

矩形

<rect> 元素在螢幕上繪製一個矩形。有六個基本屬性控制矩形在螢幕上的位置和形狀。右邊的矩形設定了 rx 和 ry 引數，使其具有圓角。如果未設定它們，則預設為 0。

xml

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x: 矩形左上角的 x 位置。
y: 矩形左上角的 y 位置。
width: 矩形的寬度。
height: 矩形的高度。
rx: 矩形角的 x 半徑。
ry: 矩形角的 y 半徑。

圓形

<circle> 元素在螢幕上繪製一個圓形。它採用三個基本引數來確定元素的形狀和大小。

xml

<circle cx="25" cy="75" r="20"/>

r: 圓形的半徑。
cx: 圓形中心的 x 位置。
cy: 圓形中心的 y 位置。

橢圓形

<ellipse> 是 <circle> 元素的更通用形式，您可以在其中分別縮放圓形的 x 和 y 半徑（在數學中通常稱為長半軸和短半軸）。

xml

<ellipse cx="75" cy="75" rx="20" ry="5"/>

rx: 橢圓的 x 半徑。
ry: 橢圓的 y 半徑。
cx: 橢圓中心的 x 位置。
cy: 橢圓中心的 y 位置。

線條

<line> 元素將兩個點的座標作為引數，並在它們之間繪製一條直線。

xml

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1: 點 1 的 x 位置。
y1: 點 1 的 y 位置。
x2: 點 2 的 x 位置。
y2: 點 2 的 y 位置。

折線

<polyline> 是一個連線的直線組。由於點的列表可能很長，因此所有點都包含在一個屬性中

xml

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

points: 點的列表。每個數字必須用空格、逗號、EOL 或帶額外空格的行尾符分隔。每個點必須包含兩個數字：x 座標和 y 座標。因此，列表 (0,0)、(1,1) 和 (2,2) 可以寫成 0, 0 1, 1 2, 2。

多邊形

<polygon> 類似於 <polyline>，因為它由連線一系列點的直線段組成。但對於多邊形，路徑會自動連線最後一個點與第一個點，形成一個封閉的形狀。

注意：矩形是一種多邊形，因此可以使用多邊形建立沒有圓角的 <rect/> 元素。

xml

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

points: 點的列表，每個數字用空格、逗號、EOL 或帶額外空格的行尾符分隔。每個點必須包含兩個數字：x 座標和 y 座標。因此，列表 (0,0)、(1,1) 和 (2,2) 可以寫成 0, 0 1, 1 2, 2。然後繪製會關閉路徑，因此會從 (2,2) 到 (0,0) 繪製最後一條直線。

路徑

<path> 是 SVG 中最通用的形狀。使用 path 元素，您可以繪製矩形（帶或不帶圓角）、圓形、橢圓、折線和多邊形。基本上任何其他型別的形狀、貝塞爾曲線、二次曲線等等。

因此，本教程的下一節將重點介紹路徑。但現在，請注意只有一個引數用於控制其形狀。

xml

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

d: 點的列表以及有關如何繪製路徑的其他資訊。有關更多資訊，請參見路徑部分。