SVG - Rect

O elemento <rect> é usado para desenhar um retângulo cujo eixo está alinhado com o sistema de coordenadas do usuário atual.

Declaração

A seguir está a declaração de sintaxe de <rect>elemento. Mostramos apenas os atributos principais.

<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

Sr. Não.	Nome e Descrição
1	x- coordenada do eixo x da parte superior esquerda do retângulo. O padrão é 0.
2	y- coordenada do eixo y do canto superior esquerdo do retângulo. O padrão é 0.
3	width - largura do retângulo.
4	height - altura do retângulo.
5	rx - usado para contornar o canto do retângulo arredondado.
6	ry - usado para contornar o canto do retângulo arredondado.
7	style - usado para especificar estilos embutidos.
8	class - usado para especificar o nome do estilo externo para o elemento.

Exemplo

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>

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente, sem qualquer plugin. O Internet Explorer 9 e superior também oferece suporte à renderização de imagens SVG.

Retângulo com opacidade

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

Resultado

Retângulo nº 3: com canto arredondado

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

Resultado

Impressão

↰ Previous page