Forum | Gli ultimi tutorial di sviluppo web
 

SVG Esempi


Prova-da-te Esempi

Gli esempi di seguito incorporare il codice SVG direttamente nel codice HTML.

Questo è supportato da Firefox, Internet Explorer 9, Google Chrome, Opera e Safari.


Esempi SVG

SVG forme base

Un cerchio
Un rettangolo
Un rettangolo con l'opacità
Un rettangolo con l'opacità 2
Un rettangolo con gli angoli arrotondati
un'ellisse
Tre ellissi su uno sopra l'altro
due ellissi
Una linea
Un poligono con tre lati
Un poligono con quattro lati
Una stella
un'altra stella
Una polilinea
Un altro poligonale
Un sentiero
Una curva di Bezier quadratica
Scrivi un testo
Ruotare un testo
Testo su più linee
Testo come un link
Definisce il colore di una linea, di testo o di uno schema (stroke)
Definisce la larghezza di una linea, testo o di uno schema (stroke-width)
Definisce diversi tipi di terminazioni ad un percorso aperto (stroke-linecap)
Linee tratteggiate Definisce (stroke-dasharray)

Filtri SVG

feGaussianBlur - effetto di sfocatura
feOffset - Offset un rettangolo, poi si fondono l'originale sulla parte superiore dell'immagine di offset
feOffset - sfocatura dell'immagine di offset
feOffset - fare il nero ombra
feOffset - trattare l'ombra come un colore
Un filtro feBlend
Filtro 1
Filtro 2
Filtro 3
Filtro 4
Filtro 5
Filtro 6

SVG gradienti

Un'ellisse con un gradiente lineare orizzontale dal giallo al rosso
Un ellisse con un gradiente lineare verticale dal giallo al rosso
Un'ellisse con un gradiente lineare orizzontale dal giallo al rosso, e un testo
Un'ellisse con una sfumatura radiale dal bianco al blu
Un'altra ellisse con un gradiente radiale, dal bianco al blu

SVG Varie

Rectangle che più volte svaniscono oltre 5 secondi
Un rettangolo in crescita che cambierà colore
Tre rettangoli che cambieranno colore
Spostare il testo lungo un tracciato di movimento
Spostare, ruotare, e il testo scala lungo un tracciato di movimento
Spostare, ruotare, e il testo scala lungo un tracciato di movimento + un rettangolo in crescita che cambia colore
Rotazione ellissi