SVG - 矩形

<rect> 元素用於繪製與當前使用者座標系對齊的矩形。

宣告

以下是<rect>元素的語法宣告。我們只顯示了主要屬性。

<rect
   x="x-axis co-ordinate"
   y="y-axis co-ordinate"
   
   width="length"
   height="length"
   
   rx="length"
   ry="length"
   
   style="style information"
   class="style class" >
</rect>

屬性

序號	名稱與描述
1	x − 矩形左上角的 x 座標。預設為 0。
2	y − 矩形左上角的 y 座標。預設為 0。
3	width − 矩形的寬度。
4	height − 矩形的高度。
5	rx − 用於圓角矩形的圓角半徑。
6	ry − 用於圓角矩形的圓角半徑。
7	style − 用於指定內聯樣式。
8	class − 用於為元素指定外部樣式名稱。

示例

testSVG.htm

<html>
   <title>SVG Rectangle</title>
   <body>
      
      <h1>Sample SVG Rectangle Image</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="0" y="15" fill="black" >
            Rectangle #1: Without opacity.</text>
            
            <rect x="100" y="30" width="300" height="100" 
            style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"></rect> 
         </g> 
      </svg>
   
   </body>
</html>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 圖片，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 圖片渲染。

帶有透明度的矩形

<html>
   <title>SVG Rectangle</title>
   <body>
      
      <h1>Sample SVG Rectangle Image</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="0" y="15" fill="black" >
            Rectangle #2: With opacity </text>
            
            <rect x="100" y="30" width="300" height="100" 
            style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);
            stroke-opacity:0.5;opacity:0.5"> </rect>
         </g>
      </svg>
   
   </body>
</html>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 圖片，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 圖片渲染。

矩形 #3：帶圓角

<html>
   <title>SVG Rectangle</title>
   <body>
      
      <h1>Sample SVG Rectangle Image</h1>
      
      <svg width="570" height="200">
         <g>
            <text x="0" y="15" fill="black" >
            Rectangle #3: With Rounded Corner </text>
            
            <rect x="100" y="100" rx="10" ry="10" width="300" height="100" 
            style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);"></rect>
         </g>
      </svg>
   
   </body>
</html>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 圖片，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 圖片渲染。

列印

svg_shapes.htm

列印頁面