rectángulo SVG

formas SVG

SVG tiene algunos elementos de forma predefinida, puede ser utilizado por los desarrolladores de usar y operar:

• Rectángulo <rect>
• Ronda <círculo>
• Oval <elipse>
• Línea <line>
• Polilínea <polilínea>
• Polígono <polígono>
• Ruta <ruta>

Las siguientes secciones le explicarán estos elementos, a partir de un elemento rectangular.

SVG rectángulo - <rect>

Ejemplo 1

etiqueta <Rect> se utiliza para crear un rectángulo, y una variante rectangular:

Aquí está el código SVG:

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

análisis de código:

• anchura y la altura atributos de elementos rect definen la altura y la anchura del rectángulo
• propiedad de estilo se utiliza para definir las propiedades CSS
• propiedad de llenado CSS define el rectángulo de color de relleno (valores RGB, nombre del color o el valor hexadecimal)
• Ancho de propiedad de trazo ancho de CSS define el borde rectangular
• La propiedad color del trazo CSS define el borde rectangular

Ejemplo 2

Veamos otro ejemplo, contiene una serie de nuevas propiedades:

Aquí está el código SVG:

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

análisis de código:

• X atributo define la posición izquierda del rectángulo (por ejemplo, x = "0" para definir el rectángulo a la parte izquierda de la ventana del navegador, la distancia es 0px)
• Top posición y atributo define el rectángulo (por ejemplo, y = "0" de la definición del rectángulo a la parte superior de la ventana del navegador es 0px)
• propiedad de relleno opacidad de CSS define la transparencia del color de relleno (rango legal: 0--1)
• La propiedad CSS accidente cerebrovascular-opacidad define la transparencia del color del trazo (rango legal: 0--1)

Ejemplo 3

Definir la opacidad de todo el elemento:

Aquí está el código SVG:

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

• propiedad CSS opacidad define el valor del elemento transparente (rango: 0-1).

Ejemplo 4

El último ejemplo, crear un rectángulo redondeado:

Aquí está el código SVG:

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

• atributos Rx y Ry pueden generar rectángulo redondeado.