SVG &lt;rect&gt;

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

矩形 <rect>

圓形 <circle>

橢圓 <ellipse>

線 <line>

折線 <polyline>

多邊形 <polygon>

路徑 <path>

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

<rect> 标簽可用來建立矩形，以及矩形的變種：

下面是SVG代碼：

<rect width="300" height="100"

style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

</svg>

對于Opera使用者：檢視SVG檔案（右鍵單擊SVG圖形預覽源）。

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度

style 屬性用來定義 CSS 屬性

CSS 的 fill 屬性定義矩形的填充顔色（rgb 值、顔色名或者十六進制值）

CSS 的 stroke-width 屬性定義矩形邊框的寬度

CSS 的 stroke 屬性定義矩形邊框的顔色

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

<rect x="50" y="20" width="150" height="150"

style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;

stroke-opacity:0.9"/>

對于Opera使用者：檢視SVG檔案（右鍵單擊SVG圖形預覽源）。

x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到浏覽器視窗左側的距離是 0px）

y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到浏覽器視窗頂端的距離是 0px）

CSS 的 fill-opacity 屬性定義填充顔色透明度（合法的範圍是：0 - 1）

CSS 的 stroke-opacity 屬性定義輪廓顔色的透明度（合法的範圍是：0 - 1）

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

style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>

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

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

<rect x="50" y="20" rx="20" ry="20" width="150"

height="150"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

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

SVG <rect>