Bagaimanakah saya boleh mengisi botol dengan warna menggunakan clipPath-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Bagaimanakah saya boleh mengisi botol dengan warna menggunakan clipPath

P粉690200856 2023-09-09 14:53:51

480

Saya ada gambar botol dan cuba isi botol ini dengan warna tertentu

Saya jumpa koordinat isian tetapi latar belakang di dalam botol tidak diisi

.item { width: 150px; height: 150px; } #tubeLiquid { background-color: #74ccf4; clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%); } #bottleMask{ background-color: #FFFFFF; clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%); }

P粉690200856

membalas semua (2)

P粉3431416332023-09-10 14:35:30 Tingkat 2

Anda tidak memerlukan tambahan.
Oleh kerana bentuk botol, anda boleh menggunakan bulatansebagai laluan keratan:

waterLevel.addEventListener('input', e => { let value = +e.currentTarget.value tubeLiquid.setAttribute('stroke-dasharray', `${value} 100`) })

svg { width: 20%; }

Draw clip-path
  Draw liquid fill
  Apply clip path

Mula-mula lukis laluan keratan dan isi skala/bentuk bar kemajuan - tanpa memotong apa-apa - untuk mencari koordinat dan dimensi yang betul.

Anda kemudian boleh menggunakan laluan keratan.
Saya menggunakan set atribut元素，因为它允许我们将pathLengthkepada 100 untuk elemen "tubeLiquid".

Kami boleh menukar nilai isian semasa dengan mudah dengan mengemas kini atributlines-dasharray:

// show 100 % stroke-dasharray="100 100" // show 50 % stroke-dasharray="50 100"

Anda akan dapati banyak contoh menggunakan kaedah ini untuk melaksanakan pelbagaipengukur dinamik/bar kemajuan atau carta pai animasi, seperti"Tetapkan peratusan bar kemajuan svg dalam JavaScript"

Suka+0

Tambah Balasan

P粉5936497152023-09-10 11:34:50 Tingkat 1

Penyelesaian terdekat yang saya temui ialah saya tidak mengisi keseluruhan botol, tetapi anda hanya perlu menukar beberapa koordinat dalam poligon, saya tidak faham bentuk dan poligon.