Tutorial Referensi SVG Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari elemen SVG,
| elemen | penjelasan | milik |
|---|---|---|
| <a> | Membuat link sekitar SVG elemen | xlink: acara xlink: menggerakkan xlink: href target |
| <AltGlyph> | Memungkinkan sebuah objek teks kontrol untuk membuat data karakter khusus | x y dx dy memutar glyphRef format xlink: href |
| <AltGlyphDef> | Hal ini didefinisikan sebagai rangkaian simbol untuk menggantikan | id |
| <AltGlyphItem> | Menggantikan definisi dari serangkaian simbol seperti calon | id |
| <Animate> | Dinamis mengubah sifat dari waktu ke waktu | attributeName = "nama atribut target" dari = "mulai value" untuk = "value End" dur = "Duration" repeatCount = "waktu animasi akan terjadi." |
| <AnimateColor> | Seiring waktu, definisi konversi warna | oleh = "value Offset Relatif" dari = "mulai value" untuk = "value End" |
| <AnimateMotion> | Sehingga unsur bergerak sepanjang jalur gerak | calcMode = "mode animasi interpolasi dapat 'diskrit', 'linear', 'serba', 'spline'" path = "jalan gerakan" keypoints = "sepanjang jalan dari pergerakan objek saat ini harus dipindahkan jauh." memutar = "menerapkan transformasi rotasi." xlink: href = "URI referensi <path> elemen yang mendefinisikan motion path." |
| <AnimateTransform> | Animasi target elemen mengubah properti, membuat kontrol animasi pan, zoom, memutar, atau miring | oleh = "value Offset Relatif" dari = "mulai value" untuk = "value End" type = "dikonversi Jenis yang perubahan nilai dari waktu ke waktu dapat menjadi 'menerjemahkan', 'skala', 'memutar', 'skewX', 'skewY'" |
| <Circle> | Definisi lingkaran | cx = "x-sumbu koordinat lingkaran." cy = "y-sumbu koordinat lingkaran." r = "jari-jari lingkaran." Diperlukan. + Tampilkan atribut: color, FillStroke, grafis |
| <ClipPath> | Digunakan untuk menyembunyikan objek yang terletak di luar bagian clipping path. Menggambar dan apa yang tidak mendefinisikan apa yang disebut gambar jalan die kliping | clip-path = "referensi dan referensi kliping jalan kliping jalan lintas." clipPathUnits = "userSpaceOnUse 'atau' objectBoundingBox". Nilai kedua perbatasan childern suatu objek, menggunakan sebagian kecil dari unit masker (default: "userSpaceOnUse") " |
| <Warna-profil> | Deskripsi ditentukan profil warna (bila menggunakan file gaya CSS) | lokal = "profil warna disimpan secara lokal ID unik" name = "" render-niat = "auto | persepsi | relatif-kolorimetri | saturasi | mutlak-kolorimetri" xlink: href = "sumber daya profil ICC URI" |
| <Kursor> | Tentukan kursor kustom platform-independen | x = "x-axis sudut kiri atas kursor (default adalah 0)." y = "y-sumbu sudut kiri atas kursor (default adalah 0)." xlink: href = "Gunakan kursor gambar URI |
| <Defs> | referensi elemen wadah | |
| <Info> | unsur murni di SVG penjelasan teks - bukan sebagai bagian dari grafis untuk ditampilkan. agen pengguna dapat ditampilkan sebagai tooltip | |
| <Ellipse> | Definisi elips | cx = "oval x-sumbu koordinat" cy = "oval y-sumbu koordinat" rx = "sepanjang sumbu x dari radius elips." Diperlukan. ry = "lonjong sepanjang radius sumbu y." Diperlukan. + Tampilkan atribut: color, FillStroke, grafis |
| <FeBlend> | Menggunakan mode blending berbeda untuk sintesis dua benda bersama-sama | mode = "image blending mode: normal | kalikan | layar | gelap | meringankan" di = "diidentifikasi sebagai masukan baku diberikan filter: SourceGraphic | SourceAlpha | backgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitif-referensi>" in2 = "image masukan pencampuran operasi kedua." |
| feColorMatrix | Filter SVG. transformasi matriks cocok | |
| feComponentTransfer | Filter SVG. Komponen-bijaksana eksekusi data remapping | |
| feComposite | Filter SVG | |
| feConvolveMatrix | Filter SVG | |
| feDiffuseLighting | Filter SVG | |
| feDisplacementMap | Filter SVG | |
| feDistantLight | Filter SVG. Definisi sumber cahaya | |
| feFlood | Filter SVG | |
| feFuncA | Filter SVG. elemen anak feComponentTransfer | |
| feFuncB | Filter SVG. elemen anak feComponentTransfer | |
| feFuncG | Filter SVG. elemen anak feComponentTransfer | |
| feFuncR | Filter SVG. elemen anak feComponentTransfer | |
| feGaussianBlur | Filter SVG. Executive gambar blur Gaussian | |
| feImage | Filter SVG. | |
| feMerge | Filter SVG. Dibangun di atas setiap lapisan gambar lainnya | |
| feMergeNode | Filter SVG. elemen anak feMerge | |
| feMorphology | Filter SVG. Pelaksanaan "penggemukan" atau "menipis" Graphics sumber | |
| feOffset | Filter SVG. Sehubungan dengan posisi saat ini dari gambar bergerak | |
| fePointLight | Filter SVG | |
| feSpecularLighting | Filter SVG | |
| feSpotLight | Filter SVG | |
| feTile | Filter SVG | |
| feTurbulence | Filter SVG | |
| filter | efek wadah penyaring | |
| fon | font kustom | |
| font-face | Menggambarkan karakteristik font | |
| font-face format | ||
| font-face-nama | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <G> | elemen wadah untuk kombinasi unsur terkait | id = "nama grup." mengisi = "isi warna kelompok." opacity = "Kelompok opacity" + Tampilkan sifat: semua |
| glyph | Untuk mengingat tulisan rahasia grafis kustom | |
| glyphRef | Definisi Pictograph dapat digunakan | |
| hkern | ||
| <Image> | Gambar kustom | x = "x-sumbu koordinat sudut kiri atas gambar." y = "y-sumbu koordinat sudut kiri atas gambar." width = "lebar gambar." keharusan. height = "tinggi gambar." keharusan. xlink :. href = "path gambar" keharusan. + Tampilkan sifat: Warna, Graphics, Gambar, viewports |
| <Baris> | Mendefinisikan garis | x1 = "x-koordinat titik awal dari garis lurus." y1 = "y koordinat titik awal dari garis lurus." x2 = "x-koordinat titik garis akhir lurus." y2 = "y koordinat titik garis akhir lurus." + Tampilkan sifat: Warna, FillStroke, Graphics, Spidol |
| <LinearGradient> | Tentukan gradien linier. Dengan menggunakan gradien linier mengisi obyek vektor, dan dapat didefinisikan sebagai horisontal, vertikal atau sudut gradien. | id = "id atribut dapat menentukan nama yang unik untuk gradien. referensi harus" gradientUnits = " 'userSpaceOnUse' atau 'objectBoundingBox'. Gunakan tampilan kotak atau objek untuk menentukan titik vektor posisi relatif. (default 'objectBoundingBox)" gradientTransform = "berlaku untuk mengubah gradien" x1 = "x vektor gradien titik awal (default 0%)" y1 = "y vektor gradien titik awal (default 0%)" x2 = "akhir gradien vektor x. (default 100%)" y2 = "akhir gradien vektor y. (default 0%)" spreadMethod = " 'pad' atau 'mencerminkan' atau 'berulang'" xlink: href = "mengacu gradien lain yang nilai atribut yang digunakan sebagai default dan berhenti termasuk Recursive." |
| <Marker> | Tag dapat ditempatkan pada puncak garis, polylines, poligon, dan jalur. Elemen-elemen ini dapat digunakan maeker properti "maeker-start", "maeker-pertengahan" dan "maeker-end", Mewarisi default, atau dapat diatur untuk URI "none" atau tag yang didefinisikan. Anda harus menentukan tag sebelum dapat direferensikan oleh URI. Setiap jenis bentuk, Anda dapat menempatkan tag di dalam. Ketika mereka menarik elemen untuk melampirkan mereka ke atas | markerUnits = "strokeWidth 'atau' userSpaceOnUse". Jika strokeWidth "maka penggunaan unit adalah sama dengan lebar dari stroke. Jika tidak, tidak menggunakan sama tampilan tag-skala unit sebagai elemen referensi (standarnya 'strokeWidth')" refx = "penanda tempat koneksi vertex (default adalah 0)." refy = "koneksi penanda tempat vertex (default adalah 0)." orient = " 'auto' selalu mark sudut tampilan." auto "akan dihitung pada sudut sehingga sumbu X dari tangen vertex (default adalah 0) markerWidth = "width ditandai (default 3)." markerHeight = "height ditandai (default 3)." Viewbox = "poin" melihat "ini SVG menggambar daerah. 4 nilai dipisahkan oleh spasi atau koma. (min x, min y, lebar, tinggi)" + Presentasi atribut: semua |
| <Mask> | Perisai adalah kombinasi dari non-cutting dan nilai-nilai transparansi. Seperti cropping, Anda dapat menggunakan beberapa grafis, teks atau jalur yang ditetapkan masker. Keadaan default masker benar-benar transparan, yang merupakan kebalikan dari pesawat kliping. Di bagian buram masker pola pengaturan topeng | maskUnits = "." userSpaceOnUse 'atau' objectBoundingBox 'mengatur apakah kliping pesawat relatif utuh jendela atau objek (default:' objectBoundingBox ') " maskContentUnits = "pola topeng kedua posisi objek relatif menggunakan persentase 'userSpaceOnUse' atau 'objectBoundingBox' (default: 'userSpaceOnUse')" x = "kliping topeng pesawat (default: -10%)." y = "kliping topeng pesawat (default: -10%)." width = "kliping topeng pesawat (default: 120%)." height = "kliping topeng pesawat (default: 120%)." |
| metadata | meta data yang ditentukan | |
| hilang-mesin terbang | ||
| mpath | ||
| <Lintasan> | Tentukan jalan | d = "perintah jalan-didefinisikan" panjang jalur = "Jika ada, jalan akan ditingkatkan dalam rangka untuk menghitung nilai poin setara dengan panjang jalan ini" Transformasi = "Daftar Konversi" + Tampilkan sifat: Warna, FillStroke, Graphics, Spidol |
| <Pola> | DET, ukuran yang Anda inginkan untuk melihat display dan pandangan. Kemudian tambahkan ke bentuk modus Anda. Pola ini diulang menghantam tepi tampilan kotak (kisaran terlihat) | id = "ID unik yang digunakan untuk referensi pola ini." diperlukan. patternUnits = "userSpaceOnUse 'atau' objectBoundingBox". Nilai kedua X, Y, lebar, modus bingkai tinggi menggunakan sebagian kecil dari objek, unit (%). " patternContentUnits = " 'userSpaceOnUse' atau 'objectBoundingBox'" patternTransform = "memungkinkan seluruh ekspresi untuk mengkonversi" x = "mode offset, dari sudut kiri atas (default adalah 0)." y = "mode offset, dari sudut kiri atas (default adalah 0)." width = "lebar ubin pola (default adalah 100%)." height = "height ubin pola (default adalah 100%)." Viewbox = "poin" melihat "ini SVG menggambar daerah. 4 nilai dipisahkan oleh spasi atau koma. (min x, min y, lebar, tinggi)" xlink: href = "Model lain, nilai properti adalah default dan setiap subclass dapat mewarisi rekursi." |
| <Polygon> | Mendefinisikan gambar mengandung setidaknya tiga sisi | poin = "titik poligon. Jumlah total poin harus bahkan." Diperlukan. mengisi-aturan = "bagian FillStroke presentasi atribut" + Tampilkan sifat: Warna, FillStroke, Graphics, Spidol |
| <Polyline> | Mendefinisikan bentuk apapun hanya garis lurus | poin polyline = "titik." Diperlukan. + Tampilkan sifat: Warna, FillStroke, Graphics, Spidol |
| <RadialGradient> | Definisi radioaktif bertahap. Buat lingkaran gradien radial | gradientUnits = " 'userSpaceOnUse' atau 'objectBoundingBox'. Gunakan tampilan kotak atau objek untuk menentukan posisi relatif poin vektor. (default adalah 'objectBoundingBox)" gradientTransform = "berlaku untuk mengubah gradien" cx = "center titik gradien (nomor atau% - 50% adalah default)." cy = "center titik gradien. (default 50%)." r = "radius bertahap. (default 50%)." fx = "titik fokus dari gradien. (default 0%)" fy = "titik fokus dari gradien. (default 0%)" spreadMethod = " 'pad' atau 'mencerminkan' atau 'berulang'" xlink: href = "mengacu gradien lain yang nilai properti sebagai rekursi default." |
| <Rect> | Mendefinisikan persegi panjang | x = "x-axis sudut kiri atas persegi panjang." y = "y-sumbu sudut kiri atas dari persegi panjang." rx = "Radius (elemen Putaran) x-axis." ry = "radius sumbu y (elemen Bulat)" width = "lebar persegi panjang." Diperlukan. height = "tinggi persegi panjang." Diperlukan. + Tampilkan sifat: Warna, FillStroke, Graphics |
| naskah | kontainer Script. (Seperti ECMAScript) | |
| set | Menetapkan nilai properti untuk waktu yang ditentukan | |
| <Berhenti> | gradien berhenti | offset = "Hentikan Offset (0-1 / 0% sampai 100%)." Referensi stop-color = "warna ini berhenti" stop-opacity = "Hentikan opacity dari (0-1)." |
| gaya | style sheet dapat tertanam langsung di dalam konten SVG | |
| <Svg> | Buat fragmen dokumen SVG | x = "tertanam di sudut kiri atas (default adalah 0)." y = "tertanam di sudut kiri atas (default adalah 0)." width = "width SVG fragmen (default adalah 100%)." height = "height SVG fragmen (default adalah 100%)." Viewbox = "poin" terlihat "di daerah SVG gambar ini. 4 nilai dipisahkan oleh spasi atau koma. (min x, min y, lebar, tinggi)" preserveAspectRatio = " 'none' atau 'xVALYVAL' sembilan kombinasi, VAL adalah" min "," pertengahan "atau" max ". (default none)" zoomAndPan = " 'magnify' atau 'pilihan disable'.Magnify memungkinkan pengguna untuk menggeser dan memperbesar file (default Magnify)" xml = "terluar <svg> unsur dan perlu menginstal SVG namespace: xmlns =" http://www.w3.org/2000/svg "xmlns: xlink =" http: //www.w3. org / 1999 / xlink "xml: space =" melestarikan "" + Tampilkan sifat: semua |
| saklar | ||
| simbol | ||
| <Teks> | Mendefinisikan teks | x = "daftar X - id Posisi poros dalam teks di posisi n karakter pertama dari sumbu x n-th jika ada karakter tambahan di belakang, kelelahan setelah posisi karakter terakhir mereka ditempatkan 0 adalah default." y = "posisi Y-sumbu daftar. (lihat x) 0 adalah default." dx = "bergerak relatif ditarik mesin terbang terakhir di panjang daftar karakter di posisi absolut (lihat x)" dy = "bergerak relatif ditarik mesin terbang terakhir di panjang daftar karakter di posisi absolut (lihat x)" memutar = "daftar berputar rotasi n-th karakter n pertama. karakter tambahan tidak memberikan akhir nilai spin" textLength = "SVG Viewer akan mencoba untuk menunjukkan jarak antara teks / font atau menyesuaikan panjang target teks (default: panjang normal teks)." lengthAdjust = "memberitahu penonton, jika Anda mencoba untuk menentukan panjang disesuaikan untuk membuat teks. dua nilai ini adalah 'jarak' dan 'spacingAndGlyphs'" + Tampilkan sifat: Warna, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| judul | unsur murni di SVG penjelasan teks - bukan sebagai bagian dari grafis untuk ditampilkan. agen pengguna dapat ditampilkan sebagai tooltip | |
| <Tref> | Mengacu pada dokumen SVG <text> elemen dan penggunaan kembali | Sama <TEXT> elemen |
| <Tspan> | Elemen setara dengan <teks>, tetapi dapat bersarang dalam teks itu sendiri dan tanda intern | Identik dengan <text> elemen + Selain: xlink: href = "mengacu pada <TEXT> elemen" |
| <Gunakan> | referensi URI menggunakan <G>, <svg> atau lainnya properti memiliki ID unik dan elemen grafis berulang. Salin unsur asli, sehingga keberadaan file asli hanya referensi. Asli mempengaruhi perubahan dalam semua salinan. | x = "elemen kiri atas klon x-axis" y = "top kiri sumbu y elemen clone" width = "kloning lebar elemen" height = "height kloning unsur" xlink: href = "URI referensi kloning unsur" + Tampilkan sifat: semua |
| pandangan | ||
| vkern |