SVG - Rect

El elemento <rect> se usa para dibujar un rectángulo cuyo eje está alineado con el sistema de coordenadas del usuario actual.

Declaración

A continuación se muestra la declaración de sintaxis de <rect>elemento. Solo mostramos los atributos principales.

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

Atributos

No Señor.	Nombre y descripción
1	x- Coordenada del eje x de la parte superior izquierda del rectángulo. El valor predeterminado es 0.
2	y- Coordenada del eje y de la parte superior izquierda del rectángulo. El valor predeterminado es 0.
3	width - ancho del rectángulo.
4	height - altura del rectángulo.
5	rx - utilizado para redondear la esquina del rectángulo redondeado.
6	ry - utilizado para redondear la esquina del rectángulo redondeado.
7	style : Se utiliza para especificar estilos en línea.
8	class : Se utiliza para especificar un nombre de estilo externo al elemento.

Ejemplo

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>

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.

Rectángulo con opacidad

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

Salida

Rectángulo n. ° 3: con esquina redondeada

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

Salida

Impresión

↰ Previous page