Foro | Los últimos tutoriales de desarrollo web
 

SVG Ejemplos


Pruebe usted mismo-ejemplos

Los ejemplos a continuación incrustar el código SVG directamente en el código HTML.

Esto es apoyado por Firefox, Internet Explorer 9, Google Chrome, Opera y Safari.


Ejemplos de SVG

Formas básicas SVG

Un circulo
Un rectángulo
Un rectángulo con opacidad
Un rectángulo con opacidad 2
Un rectángulo con esquinas redondeadas
Una elipse
Tres elipses, en uno encima del otro
dos elipses
Una línea
Un polígono con tres lados
Un polígono de cuatro lados
Una estrella
otra de las estrellas
Una polilínea
otra polilínea
Un camino
Una curva cuadrática de Bézier
Escribir un texto
Girar un texto
Texto en varias líneas
Texto como un enlace
Define el color de una línea, texto o soporte (stroke)
Define el ancho de una línea, texto o soporte (stroke-width)
Define diferentes tipos de terminaciones a un trazado abierto (stroke-linecap)
Define las líneas discontinuas (stroke-dasharray)

Filtros SVG

feGaussianBlur - efecto de desenfoque
feOffset - compensar un rectángulo, a continuación, se mezclan el original en la parte superior de la imagen de compensación
feOffset - desenfoque de la imagen de compensación
feOffset - hacer que el negro sombra
feOffset - tratar la sombra como un color
Un filtro feBlend
filtro 1
filtro 2
Filtro 3
filtro 4
Filtrar 5
Filtro de 6

Los degradados SVG

Una elipse con un gradiente lineal horizontal de amarillo a rojo
Una elipse con un gradiente lineal vertical de amarillo a rojo
Una elipse con un gradiente lineal horizontal de amarillo a rojo, y un texto
Una elipse con un degradado radial de blanco a azul
Otra elipse con un degradado radial de blanco a azul

SVG Miscelánea

Rectángulo que se desvanecen en repetidas ocasiones distancia de más de 5 segundos
Un rectángulo en crecimiento que va a cambiar de color
Tres rectángulos que cambian de color
Mover el texto a lo largo de una trayectoria de movimiento
Mover, rotar y escalar el texto a lo largo de una trayectoria de movimiento
Mover, rotar y escalar el texto a lo largo de una trayectoria de movimiento + un rectángulo en crecimiento que va a cambiar de color
Rotación de elipses