SVG <rect>

SVG tiene algunos elementos de forma predefinidos que los desarrolladores pueden usar y manipular.

Formas SVG

SVG tiene algunos elementos de forma predefinidos que los desarrolladores pueden usar y manipular:

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

Los siguientes capítulos le explicarán estos elementos, comenzando por el elemento rectángulo.

La etiqueta <rect>

La etiqueta <rect> se utiliza para crear rectángulos y variantes de rectángulos.

Para entender cómo funciona, copie este código a un bloc de notas y guárdelo como el archivo "rect1.svg". Coloque este archivo en el directorio web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect ancho="300" alto="100"
style="relleno:rgb(0,0,255);ancho_trazo:1;
stroke:rgb(0,0,0)"/>
</svg>

Explicación del código:

  • Las propiedades width y height del elemento rect se utilizan para definir la altura y anchura del rectángulo
  • La propiedad style se utiliza para definir propiedades CSS
  • La propiedad relleno de CSS define el color de relleno del rectángulo (valores rgb, nombres de color o valores hexadecimales)
  • La propiedad ancho_trazo de CSS define el ancho del borde del rectángulo
  • La propiedad stroke de CSS define el color del borde del rectángulo

Ver este ejemplo

Veamos otro ejemplo que contiene nuevas propiedades:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" ancho="250" alto="250"
style="relleno:azul;trazo:rosa;ancho_trazo:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Ejemplo de explicación:

  • La propiedad x define la posición izquierda del rectángulo (por ejemplo, x="0" define que la distancia del rectángulo al borde izquierdo de la ventana del navegador es 0px)
  • La propiedad y define la posición superior del rectángulo (por ejemplo, y="0" define que la distancia del rectángulo al borde superior de la ventana del navegador es 0px)
  • La propiedad fill-opacity de CSS define la transparencia del color de relleno (el rango válido es: 0 - 1)
  • La propiedad stroke-opacity de CSS define la transparencia del color del trazo (el rango válido es: 0 - 1)

Ver ejemplo

Define la transparencia del elemento completo:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" ancho="250" alto="250"
style="relleno:azul;trazo:rosa;ancho_trazo:5;
opacity:0.9"/>
</svg>

Explicación del código:

La propiedad opacity de CSS define el valor de transparencia del elemento completo (el rango válido es: 0 - 1)

Ver ejemplo

El último ejemplo, crear un rectángulo con esquinas redondas:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Explicación del código:

Las propiedades rx y ry pueden hacer que el rectángulo tenga esquinas redondas.

Ver ejemplo