中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：SVG 在 HTML 中 下一篇：SVG 圓形

SVG 矩形

SVG Shapes

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

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

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

SVG 矩形 - <rect>

實例 1

<rect> 標簽可用來創(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 值、顏色名或者十六進制值）
  • 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圖形預(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ù)覽源）。

  • CSS opacity 屬性用于定義了元素的透明值 (范圍: 0 到 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)生圓角。
上一篇：SVG 在 HTML 中 下一篇：SVG 圓形