Gráficos SVG: Rectángulos

Ejemplo 1

El elemento <rect> se utiliza en SVG, para crear un rectángulos y cualquier variación de su forma:

rectángulos svg

A continuación, el código utilizado para representar el rectángulo:

Explicación del código anterior:

  • Los atributos width y height, definen el ancho y alto de la imagen SVG.
  • El atributo de <style>, se utiliza para definir las propiedades de CSS del rectángulo.
  • La propiedad CSS <fill>, define el color de relleno del rectángulo.
  • La propiedad CSS <stroke>, define el color del borde del rectángulo
  • La propiedad CSS <stroke-width>, define el ancho del borde del rectángulo

Ejemplo 2

A continuación se muestra otro rectángulo de ejemplo, en realidad un cuadrado, que contiene nuevos atributos:

Cuadrado en svg

A continuación, el código utilizado para representar el cuadrado:

Explicación del código anterior:

  • El atributo x define la posición horizontal del rectángulo, partiendo desde el margen izquierdo.
  • El atributo y define la posición vertical del rectángulo, partiendo desde el margen superior.
  • La propiedad CSS fill-opacity, define la opacidad de color del relleno, en un rango de 0 a 1.
  • La propiedad CSS stroke-opacity, define la opacidad de color del borde, en un rango de 0 a 1.

Ejemplo 3

Definir la opacidad de todo el elemento:

Cuadrado en svg, con opacidad en todo el elemento

A continuación, el código utilizado para representar el cuadrado:

Explicación del código anterior:

  • La propiedad CSS opacity, define el valor de opacidad en todo el elemento, en un rango de 0 a 1.

Ejemplo 4

Crear un rectángulo con esquinas redondeadas:

Cuadrado en svg, con las esquinas redondeadas

A continuación, el código utilizado para representar el cuadrado:

Explicación del código anterior:

  • Los atributos rx y ry, redondean las esquinas del rectángulo.

Fuente: w3schools

admin

View more posts from this author
One thought on “Gráficos SVG: Rectángulos
  1. Alexander

    I precisely neeedd to thank you so much once again. I do not know what I would have made to happen without those advice contributed by you about such subject. Previously it was an absolute troublesome circumstance in my view, but seeing a professional style you solved it took me to cry over joy. Now i’m happy for this work and thus hope you know what a great job your are providing instructing many others using your website. I’m certain you’ve never got to know all of us.

     
    Reply

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *