Gunakan hati kita untuk hati SVG – Beragampengetahuan

Menurut toko kelontong lokal, ini adalah musim Hari Valentine lagi, dan cara apa yang lebih baik untuk mengekspresikan cinta kita daripada menggunakan simbol cinta: Jantung. Kembali ke beragampengetahuan, kami berbagi beberapa cara untuk menarik orang, dan tanggapannya fantastis. Lihat semua pengiriman yang luar biasa dan penuh hati dalam seri ini di Codepen:

Situs Web Bentuk CSS Temani AFIF menawarkan jantung ultra-modern hanya menggunakan CSS:

Sekarang, tunjukkan milikku Love, saya ingin melakukan sesuatu yang pribadi, licik, dan berusaha sedikit.

L Ya menyukai Kabel

Love Written adalah gerakan romantis klasik, tetapi apakah Anda sudah mempertimbangkan SVG tulisan tangan? Kami tidak membutuhkan beberapa alat menggambar vektor yang indah untuk mengekspresikan cinta kami. Sebagai gantinya, kami dapat membuka dokumen HTML kosong dan menambahkan <svg> Label:

<svg>

</svg>

Kami membutuhkan cara untuk melihat apa yang kami lakukan di “ranah svg” (saya suka menyebutnya) dan itulah yang terjadi viewBox Properti disediakan. Pesawat 2D yang disajikan oleh grafik vektor sama tak terbatasnya dengan cinta kita, secara harfiah dengan sumbu x dan sumbu y dan segalanya (mis. Pelajaran matematika).

Kami akan memulai koordinat sebagai 0 0 Dan koordinat akhir adalah 10 10 Membuat persegi yang bagus viewBox. Oh, omong -omong, kami tidak peduli dengan piksel, rem nilai atau jenis unit lainnya; Grafik Vektorkami bermain sesuai dengan aturan kami sendiri.

Kami menambahkan koordinat ini ke viewBox Sebagai string nilai:

<svg viewBox="0 0 10 10">

</svg>

Sekarang kita bisa mulai dipindahkan, Dan Hati kami. Mari kita buat garis. Untuk melakukan ini, kita perlu belajar lebih banyak tentang koordinat dan di mana harus menempel. Kita bisa menggambar garis menggunakan beberapa titik <path> elemen, gunakan jalur ini d milik. Perintah SVG Path sulit diingat, tetapi upaya berarti Anda peduli. Perintah Path adalah:

• MoveTo: M,,,,, m
• LineTo: L,,,,, l,,,,, H,,,,, h,,,,, V,,,,, v
• Kurva Bezier Cube: C,,,,, c,,,,, S,,,,, s
• Kurva Bézier Kuadrat: Q,,,,, q,,,,, T,,,,, t
• Kurva busur elips: A,,,,, a
• ClosePath: Z,,,,, z

Kami hanya tertarik untuk menggambar segmen garis sekarang, jadi kami akan menjelajahi dua yang pertama bersama -sama: MoveTo Dan LineTo. MDN secara romantis menggambarkan Moveto sebagai mengambil instrumen melukis, seperti pena atau pensil: kami belum menggambar apa pun, cukup pindahkan pena ke titik di mana kami ingin memulai pengakuan cinta.

Bagus sekali MoveTo (M) koordinat (2,2) mewakili d Atributnya adalah M2,2:

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

Tidak mengherankan, ditemukan LineTo Mirip dengan menempatkan pena di atas kertas, lukisan Dari satu titik ke titik lainnya. Mari menggambar a LineTo (L) dan koordinat (4,4)dinyatakan sebagai L2,2 Berikutnya d milik:

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

Kami akan menambahkan baris terakhir sebagai baris lain L dan koordinat (6,2)melekat pada d Atributnya adalah L6,2:

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

Jika Anda berhenti mempratinjau apa yang telah kami capai sejauh ini, Anda mungkin bingung karena akan menghadirkan segitiga terbalik. Itu bukan hati, mari kita selesaikan masalah ini.

Aplikasi bentuk SVG fill Secara default, kita bisa menghapusnya fill="none":

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

Alih -alih mengisi bentuknya, tambahkan saja stroketambahkan warna ke hati kita.

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

Selanjutnya, dengan menambahkan stroke-width:

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

Akhirnya, terapkan satu stroke-linecap dari round (Maaf, tidak ada waktu butt Lelucon) Bypass awal dan akhir rute kami, memberi kami simbol cinta klasik:

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

Sempurna. Sekarang yang harus dilakukan hanyalah mengirimkannya ke orang yang spesial itu.

💜