Przykłady SVG
- Poprzednia strona Przejścia promieniste SVG
- Następna strona Podręcznik referencyjny SVG
Spróbuj sam!
Poniższy przykład wstawia kod SVG bezpośrednio do kodu HTML.
Firefox, Internet Explorer 9, Google Chrome, Opera i Safari obsługują to.
Przykłady SVG
Podstawowe kształty SVG
- Kółko
- Prostokąt
- Nieprzejrzysty prostokąt
- Prostokąt z nieprzejrzystością 2
- Prostokąt z zaokrąglonymi rogami
- Eliptyd
- Trzy elipsy, które się nakładają
- Dwie elipsy
- Linia
- Mnohościan z trzema bokami
- Mnohościan z czterema bokami
- Gwiazdka
- Inny gwiazdka
- Krzywa zgięta
- Inna krzywa zgięta
- Ścieżka
- Druga para krzywych Béziera
- Napisz tekst
- Obracanie tekstu
- Wielostronicowy tekst
- Tekst jako link
- Definiowanie koloru linii, tekstu lub konturu (stroke)
- Definiowanie szerokości linii, tekstu lub konturu (stroke-width)
- Definiowanie różnych typów końców otwartych ścieżek (stroke-linecap)
- Definiowanie kreski (stroke-dasharray)
Filtrowanie SVG
- feGaussianBlur - Efekt rozmycia
- feOffset - Przesunięcie prostokąta, następnie mieszanie oryginalnego obrazu z przesuniętym obrazem
- feOffset - Rozmycie przesuniętego obrazu
- feOffset - Cienie stają się czarne
- feOffset - Przetwarzanie cienia w pewien kolor
- Filtr feBlend
- Filtr 1
- Filtr 2
- Filtr 3
- Filtr 4
- Filtr 5
- Filtr 6
Gradienty SVG
- Eliptyd z poziomym gradientem od żółtego do czerwonego
- Eliptyd z pionowym gradientem od żółtego do czerwonego
- Eliptyd i tekst z poziomym gradientem od żółtego do czerwonego
- Eliptyd z promienistym gradientem od bieli do niebieskiego
- Eliptyd, która ma promienistą gradient od bieli do niebieskiego
Różnorodne elementy SVG
- Prostokąt, który zanika powtarzająco przez 5 sekund
- Prostokąt, który zmienia kolor i rośnie bez końca
- Trzy prostokąty, które zmieniają kolor
- Przenoszenie tekstu po ścieżce ruchu
- Przenoszenie, obracanie, skalowanie tekstu oraz tekst zmieniający kolor, który porusza się po ścieżce ruchu
- Przenoszenie, obracanie, skalowanie tekstu oraz zmieniające kolor rosnący prostokąt + tekst zmieniający kolor, który porusza się po ścieżce ruchu
- Obracająca się elipsa
- Poprzednia strona Przejścia promieniste SVG
- Następna strona Podręcznik referencyjny SVG
