rect元素是SVG的一個基本形狀，用來創(chuàng)建矩形，基于一個角位置以及它的寬和高。它還可以用來創(chuàng)建圓角矩形。
SVG <rect>元素代表一個矩形。使用此元素，您可以繪制具有各種寬度，高度，不同筆觸（輪廓）和填充顏色，尖角或圓角等的矩形。
一個rect使用示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/></svg>測試看看 ?/?
矩形 的位置由x和y屬性確定。請記住，此位置是相對于任何封閉的（父）元素位置而言的。
矩形的大小由width和height 屬性確定。
該style屬性允許您設(shè)置其他樣式信息，例如筆觸和填充顏色，筆觸的寬度等。這將在其他文本中更詳細(xì)地介紹。
這是生成的矩形圖像:
可以在矩形上繪制圓角。屬性rx和ry 確定拐角處的圓角。rx屬性確定舍入的寬度，而ry屬性確定舍入的高度。這里有三個矩形與 rx和ry分別都設(shè)置為5，10和15。注意四舍五入中的不同大小.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="70" y="10" height="50" width="50" rx="10" ry="10" style="stroke:#006600; fill: #00cc00"/> <rect x="130" y="10" height="50" width="50" rx="15" ry="15" style="stroke:#006600; fill: #00cc00"/> </svg>測試看看 ?/?
生成的圓角矩形效果如下:
在這些示例中，每個矩形中的rx和ry設(shè)置為相同的值。如果僅設(shè)置rx屬性，則ry屬性將獲得與相同的值rx。這是定義均勻圓角的快捷方式。
這是兩個將rx屬性都設(shè)置為10，但將ry 屬性分別設(shè)置為5和15的示例。這將向您展示在不同的高度和寬度下，圓角矩形的外觀。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="50" width="50" rx="10" ry="5" style="stroke:#006600; fill: #00cc00"/> <rect x="130" y="10" height="50" width="50" rx="10" ry="15" style="stroke:#006600; fill: #00cc00"/> </svg>測試看看 ?/?
您可以使用SVG stroke樣式屬性設(shè)置矩形的邊框（輪廓）樣式。本示例將stroke顏色設(shè)置為深綠色，并將邊框?qū)挾仍O(shè)置為3:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; fill: none; " /></svg>測試看看 ?/?
rect在瀏覽器中顯示時,該元素的外觀效果如下:
您也可以使用style屬性stroke-dasharray使矩形邊框變?yōu)樘摼€。示例如下:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900; stroke-width: 3; stroke-dasharray: 10 5; fill: none; " /></svg>測試看看 ?/?
以上代碼運(yùn)行效果如下::
您可以使用SVG填充樣式屬性填充矩形。例如，您可以rect通過將style屬性fill設(shè)置為none，來選擇不填充元素。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900;fill: none;" /></svg>測試看看 ?/?
這是rect在瀏覽器中呈現(xiàn)時,沒有填充的元素的外觀:
您也可以選擇用顏色填充矩形。此示例rect用明亮的綠色填充元素:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900;fill: #33ff33;"/> </svg>測試看看 ?/?
以下是rect在瀏覽器中,填充后顯示的效果:
您還可以使用style屬性fill-opacity使填充透明。此示例顯示了兩個矩形，一個矩形部分在另一個矩形的頂部，而頂部的矩形是半透明的:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="20" y="20" width="100" height="100" style="stroke: #009900; fill: #33ff33; " /> <rect x="50" y="50" width="100" height="100" style="stroke: #000099; fill: #3333ff; fill-opacity: 0.5; " /></svg>測試看看 ?/?
這是rect在瀏覽器中呈現(xiàn)時元素的半透明的外觀效果:
在此示例中，第二個矩形的筆觸不是透明的，但是您可以使用style屬性stroke-opacity使其透明。