jump to navigation

Borde con gradiente lineal Febrero 7, 2008

Publicado por lineadecodigo en : SVG , trackback

Lo más normal es utilizar un gradiente como relleno de una figura. Eso no quiere decir que no podamos utilizar el gradiente sobre un borde.

Para poder realizar esta operación lo primero que tenemos que hacer es definir nuestro gradiente. La forma de hacer esto es la misma indistintamente de donde vayamos a utilizar este. A si que tendremos una definición de gradiente como la que sigue:

  1. <defs>
  2. <linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
  3.     <stop offset="30%" stop-color="#f00"/>
  4.     <stop offset="60%" stop-color="#ff0"/>
  5.   </linearGradient>
  6. </defs>

Si ves muy complicado el definir el gradiente, en Linea de Código tienes muchos artículos y ejemplos que te explican como trabajar con gradientes.

Ahora solo nos queda utilizar el gradiente como fondo del borde. Recordar que el relleno de los bordes de las figuras básicas o shapes se suele controlar con el atributo stroke.

Y para hacer referencia al gradiente hay que utilizar la función url. Esta recibirá como parámetro el nombre que le hayamos dado al ID del gradiente, precedido de una almohadilla (#). El código a utilizar sería este:

  1. url(#rojo_naranja)

Al final tendremos el siguiente código. En este caso, aplicado a un círculo (no es que tenga nada contra el resto de figuras básicas):

  1. <defs><circle cx="600" cy="200" r="100" style="fill:#fff" stroke="url(#rojo_naranja)" stroke-width="2"/>

Visualizar el ejemplo | Descargar el código

Articulos Similares:

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 9207 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , , , , , ,

Comentarios»

1. Luis Esteban - Abril 12, 2008

Exelentes ejemplos, son muy buenos para iniciarse con SVG


Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen