Forum | Najnowsze tutoriale tworzenie stron internetowych
 

SVG Przykłady


Spróbuj to sam Przykłady

Poniższe przykłady osadzić kod SVG bezpośrednio w kodzie HTML.

Potwierdzeniem tego jest Firefox, Internet Explorer 9, Google Chrome, Opera i Safari.


Przykłady SVG

SVG Kształty podstawowe

Koło
prostokąt
Prostokąt z kryciem
Prostokąt z kryciem 2
Prostokąt z zaokrąglonymi rogami
elipsą
Trzy elipsy na górze każdego innego
dwie elipsy
linia
Wielokąt z trzech stron
Wielokąt z czterech stron
Gwiazda
Kolejną gwiazdą
polilinia
Innym łamaną
Ścieżka
Krzywej Béziera drugiego stopnia
Napisz tekst
Obracanie tekstu
Tekst na kilku liniach
Tekst jako link
Określa kolor linii, tekstu lub konspektu (stroke)
Określa szerokość linii, tekstu lub konspektu (stroke-width)
Definiuje różne rodzaje końcówek do otwartej ścieżce (stroke-linecap)
Określa linie przerywane (stroke-dasharray)

Filtry SVG

feGaussianBlur - efekt rozmycia
feOffset - przesunięcie prostokąta, a następnie mieszać oryginału na górze przesunięcie obrazu
feOffset - rozmycie obrazu offsetowej
feOffset - sprawiają, że cień czarny
feOffset - traktować jako cień koloru
Filtr feBlend
filtr 1
filtr 2
filtr 3
filtr 4
filtr 5
filtr 6

SVG Gradienty

Elipsą z poziomym liniowym gradientem od żółtego do czerwonego
Elipsą z pionowym gradientem liniowym od żółtego do czerwonego
Elipsą z poziomym liniowym gradientem od żółtego do czerwonego i tekst
Elipsą z gradientu radialnego z białego na niebieski
Innym elipsą z gradientu radialnego z białego na niebieski

SVG Inne

Prostokąt, który wielokrotnie znikną w ciągu 5 sekund
Rosnąca prostokąt zmieni kolor
Trzy prostokąty, które zmieniają kolor
Przesuwanie tekstu wzdłuż ścieżki ruchu
Przesuwanie, obracanie i skala tekstu wzdłuż ścieżki ruchu
Przesuwanie, obracanie i skala tekstu wzdłuż ścieżki ruchu + rosnąca prostokąt zmieni kolor
obracanie elipsy