Los últimos tutoriales de desarrollo web
 

SVG <Rect>


formas SVG

SVG tiene algunos elementos de forma predefinidos que pueden ser utilizados por los desarrolladores:

  • Rectángulo <rect>
  • Círculo <circle>
  • Elipse <ellipse>
  • Línea <line>
  • Polilínea <polyline>
  • Polígono <polygon>
  • Ruta <path>

Los siguientes capítulos explicarán cada elemento, empezando por el elemento rect.


SVG Rectángulo - <rect>

Ejemplo 1

La <rect> elemento se utiliza para crear un rectángulo y las variaciones de una forma de rectángulo:

style = "relleno: rgb (0,0,255); ictus-width: 3; accidente cerebrovascular: rgb (0,0,0)" /> Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Inténtalo tú mismo "

Code explanation:

  • Los atributos de anchura y altura de la <rect> elemento definen la altura y el ancho del rectángulo
  • El style atributo se utiliza para definir las propiedades CSS para el rectángulo
  • La propiedad de llenado CSS define el color de relleno del rectángulo
  • La propiedad CSS trazo de anchura define el ancho del borde del rectángulo
  • La propiedad de trazo CSS define el color del borde del rectángulo

Ejemplo 2

Veamos otro ejemplo que contiene algunos de los nuevos atributos:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Inténtalo tú mismo "

Code explanation:

  • El x atributo define la posición izquierda del rectángulo (por ejemplo, x = "50" coloca el rectángulo 50 píxeles desde el margen izquierdo)
  • El y atributo define la posición superior del rectángulo (por ejemplo, y = "20" coloca el rectángulo 20 píxeles desde el margen superior)
  • La propiedad CSS relleno Opacidad define la opacidad del color de relleno (legal range: 0 to 1)
  • La propiedad CSS accidente cerebrovascular-opacidad define la opacidad del color del trazo (legal range: 0 to 1)

Ejemplo 3

Definir la opacidad de todo el elemento:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Inténtalo tú mismo "

Code explanation:

  • La propiedad CSS opacidad define el valor de opacidad de todo el elemento (legal range: 0 to 1)

Ejemplo 4

Último ejemplo, crear un rectángulo con esquinas redondeadas:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Inténtalo tú mismo "

Code explanation:

  • El RX y los ry atributos redondea las esquinas del rectángulo