Tulisan tangan hati SVG, dengan hati kita

Hari Valentine ada di sini, dan apakah cara yang lebih baik untuk menunjukkan kasih sayang anda daripada dengan hati yang ditarik tangan? Sebelum ini, trik CSS mempamerkan pelbagai teknik lukisan jantung, mengilhami koleksi penyerahan codepen yang menarik. Salah satu contohnya ialah tapak bentuk CSS Temani AFIF, yang menampilkan hati bergaya yang dibuat semata -mata dengan CSS.

Untuk sentuhan yang lebih peribadi, mari kita membuat hati SVG. Tiada perisian vektor lanjutan diperlukan! Kami akan menggunakan dokumen HTML yang mudah dan tag

: <svg></svg>

<svg></svg>

Untuk memvisualisasikan penciptaan kami, kami akan menggunakan atribut

. Fikirkan ini sebagai kanvas lukisan kami, yang ditakrifkan oleh koordinat. Kami akan menetapkan kotak pandangan persegi: viewBox

<svg viewbox="0 0 10 10"></svg>

Sekarang, mari kita lukis! Kami akan menggunakan elemen

dan atribut <path></path> untuk menentukan bentuk hati kita menggunakan segmen garis. Perintah laluan SVG utama adalah: Moveto (M, M), Lineto (L, L, H, H, V, V), lengkung bézier padu (c, c, s), lengkung bézier kuadrat (q, q, t, t) d Untuk hati ini, kami akan memberi tumpuan kepada Moveto dan Lineto. Kami mulakan dengan berpindah ke koordinat (2,2):

Seterusnya, kami melukis garis ke (4,4), kemudian ke (6,2):

<svg viewbox="0 0 10 10"><path d="M2,2"></path></svg>

Ini mewujudkan segitiga terbalik. Untuk membetulkannya, mari keluarkan isi lalai dan tambahkan strok:

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2"></path></svg>

mari kita tambah

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2" fill="none" stroke="rebeccapurple"></path></svg>

untuk penglihatan yang lebih baik dan tambahkan hujung bulat menggunakan

: stroke-width stroke-linecap="round"

Dan di sana anda memilikinya-hati SVG yang tidak sempurna, tangan yang tidak sempurna, bersedia untuk dikongsi dengan seseorang yang istimewa! ?

<svg viewbox="0 0 10 10"><path d="M2,2 L4,4 L6,2" fill="none" stroke="rebeccapurple" stroke-width="4" stroke-linecap="round"></path></svg>

Atas ialah kandungan terperinci Tulisan tangan hati SVG, dengan hati kita. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!