全部教學 » SVG <rect>元素

SVG <rect>元素

2019-10-16 23:02:35

<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.html - 

<html>
   <title>SVG矩形</title>
   <body>

      <h1>簡單SVG矩形圖片</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網路瀏覽器中開啟文字SVG.html。 您可以使用Chrome/Firefox/Opera直接檢視SVG影象，無需任何外掛。 Internet Explorer 9及更高版本還支援SVG影象呈現。

矩形＃2:帶不透明的矩形

<html>
   <title>SVG矩形</title>
   <body>

      <h1>簡單SVG矩形圖片</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>

上面範例程式碼，顯示結果如下 -

矩形＃3:圓角

<html>
   <title>SVG矩形</title>
   <body>

      <h1>簡單SVG矩形圖片</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/Firefox/Opera直接檢視SVG影象，無需任何外掛。 Internet Explorer 9及更高版本還支援SVG影象呈現。