Rectángulo redondeado en SVG Diciembre 24, 2007
Publicado por lineadecodigo en : SVG , trackbackEste ejemplo muestra cómo redondear los bordes de un rectángulo con el lenguaje SVG. La tarea es sencilla, ya que en la etiqueta básica RECT, que nos sirve para el dibujo de rectángulos, tenemos dos propiedades: rx y ry.
Ambas propiedades permiten redondear los bordes de la coordenadas X y las coordenadas Y.
Así podríamos tener el siguiente código:
<rect width="200" height="100" rx="20" ry="20"/>
Todos los bordes se redonderarian 20 pixels.
Ahora que tendríamos un efecto muy curioso si redondeásemos tanto los bordes cómo el ancho y alto del rectángulo. Consiguiendo círculos y elipses......
Circulo
<rect x="50" y="50" rx="100" ry="100" width="100" height="100"/>
Elipse
<rect x="50" y="50" rx="100" ry="200" width="200" height="100"/>
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Dibujar un rectángulo con SVG
- Combos con imagenes
- Area de un rectángulo con Java
- Bordes 3D con CSS
- Imagenes con borde
Enviar entrada por email
| 
Imprimir
| 4524 visitas
(1 votos, media: 3.00 de 5)
Loading ...
Comentarios»
Todavía no hay comentarios. ¿Quieres ser el primero?