SVG <rect>


SVG Shapes

SVG有一些預設的形狀元素,可被開發者使用和操作:

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

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


SVG 矩形 - <rect>

例項 1

<rect> 標籤可用來建立矩形,以及矩形的變種:

下面是SVG程式碼:

範例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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 屬性定義矩形邊框的顏色

例項 2

讓我們看看另一個範例,它包含一些新的屬性:

範例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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"/>
</svg>

線上執行 ?

對於Opera使用者:檢視SVG檔案(右鍵單擊SVG圖形預覽源)。

程式碼解析:

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

例項 3

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

下面是SVG程式碼:

範例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>

線上執行 ?

對於Opera使用者:檢視SVG檔案(右鍵單擊SVG圖形預覽源)。

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

例項 4

最後一個範例,建立一個圓角矩形:

下面是SVG程式碼:

範例

<svg xmlns="http://www.w3.org/2000/svg" version="1.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"/>
</svg>

線上執行 ?

對於Opera使用者:檢視SVG檔案(右鍵單擊SVG圖形預覽源)。

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