Latest web development tutorials

ejemplos de SVG

ejemplos en línea

El siguiente ejemplo es el código SVG directamente incorporado en el código HTML.

Google Chrome, Firefox, Internet Explorer9, y Safari son compatibles.

NOTA: En el siguiente ejemplo no se ejecutará en la ópera, aunque el apoyo Opera - SVG no soporta SVG directamente en el código HTML.


ejemplos de SVG

Formas básicas SVG

Un círculo

rectángulo

rectángulo opaco

A opaco rectangular 2

Un rectángulo con esquinas redondeadas

Un óvalo

Y amontonó en las tres elipses

dos elipses

Una línea

triángulo

cuadrilátero

Una estrella

otra estrella

línea quebrada

otra polilínea

camino

curva de Bézier cuadrática

Escribir un texto

texto girado

Texto en el camino

Unas pocas líneas de texto

enlace de texto

Definir un color de fondo, texto o soporte (Stoke)

Definir un ancho de línea, texto o soporte (carrera de ancho)

atributo de trazo-linecap define el final de un camino abierto de diferentes tipos:

La definición de una línea de puntos (carrera-dasharray)

Filtros SVG

feGaussianBlur - la falta de definición

feOffset - compensado por un rectángulo, y luego la parte superior de la imagen de compensación de mezcla

feOffset - descentramiento de la imagen de desenfoque

feOffset - de modo que las sombras negro

feOffset - de color recubierto con sombra

Un filtro de feBlend

Un filtro de feColorMatrix

Un filtro feComponentTransfer

feOffset, feFlood, feComposite, feMerge y feMergeNode

Un filtro de feMorphology

filtro 1

filtro 2

Filtro 3

filtro 4

Filtrar 5

Filtro de 6

SVG Gradient

gradiente lineal horizontal de amarillo a rojo ovalada

gradiente lineal vertical del amarillo al rojo ovalada

Horizontal gradiente lineal de amarillo a un óvalo rojo dentro del texto y añadir

degradado radial de blanco a azul ovalado

degradado radial de blanco a azul ovalado otra

Varios SVG

Repita con 5 segundos se desvanecen rectángulo

Y cambiar el color del rectángulo se hace grande

Se va a cambiar el color de los tres rectángulos

Movimiento a lo largo de una trayectoria de movimiento de texto

A lo largo de una trayectoria de movimiento para mover, rotar y escalar el texto

A lo largo de una trayectoria de movimiento para mover, rotar y escalar el texto + ampliado gradualmente y el rectángulo cambio de color