Forum | tutorial pengembangan web terbaru
 

SVG contoh


Coba-Sendiri Contoh

Contoh di bawah menanamkan kode SVG langsung ke kode HTML.

Hal ini didukung oleh Firefox, Internet Explorer 9, Google Chrome, Opera, dan Safari.


Contoh SVG

SVG Bentuk Dasar

Sebuah lingkaran
Sebuah persegi panjang
Sebuah persegi panjang dengan opacity
Sebuah persegi panjang dengan opacity 2
Sebuah persegi panjang dengan sudut membulat
elips
Tiga elips di atas satu sama lain
dua elips
Sebuah garis
Sebuah poligon dengan tiga sisi
Sebuah poligon dengan empat sisi
Sebuah bintang
bintang lain
Sebuah polyline
polyline lain
Sebuah jalan
Kurva Bezier kuadrat
Menulis teks
Putar teks
Teks pada beberapa baris
Teks sebagai link
Mendefinisikan warna garis, teks atau garis (stroke)
Mendefinisikan lebar garis, teks atau garis (stroke-width)
Mendefinisikan berbagai jenis akhiran untuk jalan terbuka (stroke-linecap)
Garis mendefinisikan putus-putus (stroke-dasharray)

Filter SVG

feGaussianBlur - efek blur
feOffset - diimbangi persegi panjang, kemudian berbaur asli di atas gambar diimbangi
feOffset - mengaburkan gambar diimbangi
feOffset - membuat bayangan hitam
feOffset - memperlakukan bayangan sebagai warna
Sebuah filter feBlend
Filter 1
Filter 2
Filter 3
Filter 4
Filter 5
Filter 6

SVG Gradien

Elips dengan gradien linier horisontal dari kuning ke merah
Elips dengan gradien linier vertikal dari kuning ke merah
Elips dengan gradien linier horisontal dari kuning ke merah, dan teks
Elips dengan gradien radial dari putih ke biru
Elips lain dengan gradien radial dari putih ke biru

SVG Lain-lain

Persegi panjang yang berulang kali memudar lebih dari 5 detik
Sebuah persegi panjang yang berkembang bahwa akan berubah warna
Tiga persegi panjang yang akan berubah warna
Pindahkan teks sepanjang jalan motion
Memindahkan, memutar, dan teks skala sepanjang jalan motion
Memindahkan, memutar, dan skala teks sepanjang jalan gerak + persegi panjang yang berkembang bahwa akan berubah warna
berputar elips