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>

属性

Sr.No.	Name&Description
1	x − x-axis co-ordinate of top left of the rectangle. Default is 0.
2	y − y-axis co-ordinate of top left of the rectangle. Default is 0.
3	width − width of the rectangle.
4	height − height of the rectangle.
5	rx − used to round the corner of the rounded rectangle.
6	ry − used to round the corner of the rounded rectangle.
7	style − used to specify inline styles.
8	class − used to specify external style name to the element.

例

テストVG

<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ウェブブラウザでテキストSVGを開きます。 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ウェブブラウザでテキストSVGを開きます。 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ウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

link：/cgi-bin/printpage.cgi [__印刷]

Svg-rect

目次

SVG-四角形

宣言

属性

例

出力

不透明度のある長方形

出力

長方形＃3：角が丸い

出力