Properti ini mendefinisikan jalur.
Penggunaan
Atribut definisi Jalur Kategori
nilai
Variabilitas Ya
Dokumentasi Spesifikasi SVG 1.1 (Edisi ke-2)
Properti d sebenarnya adalah string yang berisi serangkaian deskripsi jalur. Jalur ini terdiri dari instruksi berikut:
- Pindahke
- Garis
- Kurva ke
- Arcto
- Tutup Jalur
Ini digabungkan dalam satu string. Perintah yang berbeda ini peka huruf besar/kecil; Perintah huruf besar menunjukkan bahwa parameternya adalah posisi absolut, sedangkan perintah huruf kecil menunjukkan titik relatif terhadap posisi saat ini. Nilai negatif dapat ditentukan sebagai parameter untuk perintah: sudut negatif akan berlawanan arah jarum jam, dan posisi x dan y absolut akan dianggap sebagai koordinat negatif. Nilai x relatif negatif akan bergerak ke kiri, sedangkan nilai y relatif negatif akan bergerak ke atas.
Pindahke
Perintah Moveto dapat dianggap sebagai mengambil pena gambar dan mendarat di tempat lain. Tidak ada segmen garis yang ditarik antara titik sebelumnya dan titik yang ditentukan ini. Sebaiknya mulai jalur dengan perintah Moveto, karena tanpa Moveto yang diinisialisasi, titik awalnya adalah tempat operasi sebelumnya terjadi, yang dapat menyebabkan perilaku yang tidak ditentukan.
Sintaks:
M x,y di sini x dan y adalah koordinat absolut, masing-masing mewakili koordinat horizontal dan vertikal.
M DX, dy di sini DX dan dy adalah jarak relatif terhadap titik saat ini, masing-masing ke kanan dan ke bawah.
Contoh:
Pada posisi absolut x=50, y= 100:<path d="M50,100..." />
Bergerak 50 ke kanan, 100 ke bawah: <jalur d="m50.100..." />
Garis
Berbeda dengan perintah Moveto, perintah Lineto akan menggambar segmen lurus. Segmen garis lurus ini bergerak dari posisi saat ini ke posisi yang ditentukan. Sintaks perintah Lineto asli adalah "L x, y" atau "l dx, dy", di mana x dan y adalah koordinat absolut, dan dx dan dy adalah jarak ke kanan dan bawah, masing-masing. Ada juga huruf H dan V, yang masing-masing menentukan gerakan horizontal dan vertikal. Mereka memiliki sintaks yang sama dengan L, dan versi huruf kecilnya adalah jarak relatif, dan versi huruf besar adalah posisi absolut.
Kurva ke
Perintah Curvto menentukan kurva Bézier. Ada dua jenis kurva Bézier: kubik dan kuadrat. Kurva Bézier kuadrat adalah kurva Bézier kubik khusus di mana kedua ujung titik kontrol sama. Sintaks kurva Bézier kuadrat adalah "Q cx, cy x, y" atau "q dcx, dcy dx, dy". Cx dan Cy keduanya adalah koordinat absolut titik kontrol, sedangkan DCX dan DCY adalah jarak titik kontrol dalam arah X dan Y, masing-masing.
Kurva Bézier kubik mengikuti konsep yang sama dengan kurva Bézier kuadrat, tetapi perlu mempertimbangkan dua titik kontrol. Sintaks kurva Bézier kubik adalah: "C c1x, c1y c2x, c2y x, y" atau "c dc1x, dc1y dc2x, dc2y dx, dy", di mana c1x, c1y dan c2x, c2y adalah koordinat absolut dari titik kontrol titik awal dan akhir, masing-masing. DC1X, DC1Y, dan DC2X, DC2Y relatif terhadap titik awal, bukan ke titik akhir. DX dan DY masing-masing adalah jarak ke kanan dan ke bawah.
Untuk menghubungkan kurva Bézier yang halus, Anda juga dapat menggunakan perintah T dan S. Sintaksnya lebih sederhana daripada perintah Curveto lainnya karena mengasumsikan bahwa titik kontrol pertama adalah cerminan dari titik kontrol sebelumnya pada yang sebelumnya, atau bahwa itu sebenarnya adalah titik sebelumnya jika tidak ada titik kontrol sebelumnya. Sintaks T adalah "T x,y" atau "t dx,dy", yang masing-masing sesuai dengan koordinat absolut dan jarak relatif, dan digunakan untuk membuat kurva Bézier kuadrat. S digunakan untuk membuat kurva Bézier kubik, sintaksnya adalah "S cx, cy x, y" atau "s dcx, dcy dx, dy", di mana (d)cx menentukan titik kontrol kedua.
Terakhir, semua perintah kurva Bézier dapat membuat grafik Bézier multi-sisi, menginisialisasi perintah terlebih dahulu, dan kemudian menentukan semua parameter beberapa kali untuk membuat grafik Bézier multi-sisi. Oleh karena itu, dua perintah berikut dapat membuat jalur yang sama persis:
Arcto
Terkadang lebih mudah untuk menggambarkan jalur kurva busur elips daripada jalur kurva Bézier. Pada akhirnya, elemen jalur mendukung perintah Arcto. Pusat busur dihitung dengan variabel lain. Deklarasi arcto relatif sedikit pengulangan dari Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Mendekonstruksinya, rx dan ry adalah jari-jari dalam arah x dan y, masing-masing, dan nilai LargeArcFlag adalah 0 atau 1 untuk menentukan apakah akan menggambar busur kecil (0) atau busur besar (1). SweepFlag juga 0 atau 1, yang digunakan untuk menentukan apakah busur searah jarum jam (1) atau berlawanan arah jarum jam (0). x dan y adalah koordinat tujuan. Meskipun xAxisRotate mendukung perubahan orientasi sumbu x relatif terhadap kerangka referensi saat ini, parameter ini tampaknya tidak memiliki banyak efek di Gecko 7.
Tutup Jalur
Perintah ClosePath hanya akan menggambar garis lurus dari titik saat ini ke titik pertama di jalur saat ini. Ini adalah perintah paling sederhana dan tidak dilengkapi dengan parameter apa pun. Ini mengikuti jalur linier terpendek ke titik awal, dan jika jalur lain jatuh di jalur ini, jalur yang mungkin berpotongan. Sintaksnya adalah "Z" atau "z", dan kedua metode penulisan memiliki fungsi yang sama.
elemen
Elemen berikut dapat menggunakan atribut d:
Aturan yang sama dapat <animate>diterapkan pada jalur animasi.
Pengingat
Asal (sistem koordinat 0,0 titik) seringkali merupakan sudut kiri atas konteks. Namun<glyph>, asal elemen tersebut berada di sudut kiri bawah kotak suratnya.
Koma diperbolehkan di antara dua angka, tetapi tidak di tempat lain.
contoh
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Untuk menunjukkan apa arti d="M37,17v15H14V17H37z M50,0H0v50h50V0z", mari kita bahas setiap subparagraf dari string ini.
d=" M37,17 || ayat 15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Properti ini berisi string yang membentuk seluruh SVG.
M37,17
M adalah singkatan dari MoveTo. Huruf besar "M" berarti koordinat absolut, dan huruf kecil "m" berarti jarak relatif. Ini menyiratkan bahwa itu didasarkan pada koordinat awal, garis ada di dalam kotak, dan Anda mulai di sudut kanan atas persegi panjang di dalam kotak.
37 adalah singkatan dari posisi svg awal, pada 37 piksel pada sumbu X.
17 Mulai posisi svg, pada 17 piksel pada sumbu y.
ayat 15
v adalah singkatan dari vertikal. V huruf besar menunjukkan koordinat absolut, dan V huruf kecil menunjukkan panjang dan jarak relatif. dx/dy dan x/y dapat digunakan pada posisi H/V dan h/v yang sesuai.
Di sini direpresentasikan menggambar garis vertikal 15 piksel relatif terhadap koordinat tertentu. Artinya, Anda menggambar 15 piksel ke koordinat 37,32.
H14
H adalah singkatan dari level, yang merupakan koordinat absolut karena menggunakan huruf kapital.
Dari akhir v15, gambar garis horizontal hingga koordinat absolut 14 tercapai, dan akhiri gambar garis saat mencapai koordinat x 14. Goresan terletak pada koordinat 14,32.
V17
Sama seperti sebelumnya, mulailah dari akhir baris sebelumnya dan gambar garis vertikal hingga Anda mencapai koordinat sumbu y 17. Goresan terletak pada koordinat 14,17.
H37
Terakhir, mulai dari 14,17, gambarlah garis horizontal hingga Anda mencapai koordinat sumbu x 37. Stroke terletak pada koordinat 37,17 (nilai M)
z
Huruf kecil dan huruf besar Z menutup serangkaian segmen SVG.
,
Koma memulai string segmen grafis vektor sederhana berikutnya. Seri segmen garis vektor sederhana berikutnya akan membuat kotak luar.
M50,0
Mulailah dari sumbu x 50 dan sumbu y 0.
H0
Gambar garis lurus hingga (0,0).
ayat 50
Gambar garis vertikal 0,0 piksel relatif terhadap 50. Garis ini akan ditarik ke (0,50).
h50
Gambar garis horizontal 50 piksel relatif terhadap (0,-50). Garis ini akan ditarik ke kanan ke (50,50).
V0
Gambar garis vertikal hingga Anda mencapai koordinat sumbu y 0. Ini akan menarik garis ke (50,0), yang merupakan nilai M.
z
Huruf kecil dan huruf besar Z menutup serangkaian segmen SVG.
Lampirkan kode:
Terakhir, tautan ke dokumen dilampirkan: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Diposting pada 04/05/2018 11.29.47
|
|
|
|
