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

打印页面