SVG 矩形

2018-03-02 14:49 更新

SVG <rect>

本節(jié)介紹 SVG 形狀元素中的 ——<rect> 元素,該元素會在屏幕上繪制一個矩形 。

SVG Shapes

SVG有一些預(yù)定義的形狀元素,可被開發(fā)者使用和操作:

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

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


SVG 矩形 - <rect>

實例 1

<rect> 標(biāo)簽可用來創(chuàng)建矩形,以及矩形的變種:

下面是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圖形預(yù)覽源)。

代碼解析:

  • rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
  • style 屬性用來定義 CSS 屬性
  • CSS 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進(jìn)制值)
  • 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圖形預(yù)覽源)。

代碼解析:

  • x 屬性定義矩形的左側(cè)位置(例如,x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 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圖形預(yù)覽源)。

  • The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

實例 4

最后一個例子,創(chuàng)建一個圓角矩形:

下面是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圖形預(yù)覽源)。

  • rx 和 ry 屬性可使矩形產(chǎn)生圓角。

在下一節(jié)內(nèi)容中,我們將繼續(xù)介紹 SVG 中的圓形元素。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號