SVG <rect>

SVG Shapes

SVG有一些預定義的形狀元素，可被開發者使用和操作：

• 矩形 <rect>
• 圓形 <circle>
• 橢圓 <ellipse>
• 線 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

下麵的章節會為您講解這些元素，首先從矩形元素開始。

SVG 矩形 - <rect>

實例 1

<rect> 標籤可用來創建矩形，以及矩形的變種：

下麵是SVG代碼：

對於Opera用戶： （右鍵單擊SVG圖形預覽源）。

代碼解析:

• rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
• style 屬性用來定義 CSS 屬性
• CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
• CSS 的 stroke-width 屬性定義矩形邊框的寬度
• CSS 的 stroke 屬性定義矩形邊框的顏色

實例 2

讓我們看看另一個例子，它包含一些新的屬性：

對於Opera用戶：（右鍵單擊SVG圖形預覽源）。

代碼解析：

• x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到流覽器窗口左側的距離是 0px）
• y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到流覽器窗口頂端的距離是 0px）
• CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
• CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度（合法的範圍是：0 - 1）

實例 3

定義整個元素的不透明度：

下麵是SVG代碼：

對於Opera用戶：（右鍵單擊SVG圖形預覽源）。

• CSS opacity 屬性用於定義了元素的透明值 (範圍: 0 到 1)。

實例 4

最後一個例子，創建一個圓角矩形：

下麵是SVG代碼：

對於Opera用戶：（右鍵單擊SVG圖形預覽源）。

• rx 和 ry 屬性可使矩形產生圓角。