Elemento recto SVG – Barcelona Geeks

El SVG <rect> elemento se utiliza para crear un rectángulo. Podemos personalizar las formas del rectángulo:

Sintaxis:

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

X: coordenada del eje x de la parte superior izquierda.
Y: coordenada del eje y de la parte superior izquierda.
ancho: Ancho del rectángulo.
altura: Altura del rectángulo.
rx: Redondez del eje x.
ry: Redondez del eje y.
estilo: especifique el estilo en línea.
clase: especifique el estilo externo.

Ejemplo:

html

<!DOCTYPE html>
<html>
<body>
 
<svg width="400" height="100">
<rect width="400" height="100"
      style="fill:rgb(0, 0, 255);
      stroke-width:10;stroke:rgb(0, 0, 0)" />
</svg>
 
</body>
</html>

Producción:

Ejemplo: Cambiar la esquina del rectángulo.

html

<!DOCTYPE html>
<html>
  <body>
 
    <svg width="400" height="380">
        <rect x="80" y="20" rx="20"
              ry="20" width="150" height="150"
              style="fill:orange;
              stroke:black;
              stroke-width:2;
              opacity:0.5" />
    </svg>
 
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

Deja una respuesta Cancelar la respuesta