Latest web development tutorials

SVG 矩形

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

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

Here is the SVG code:

實例

<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 屬性可使矩形產生圓角。