Pada mulanya, prospek clip-path: path() di Firefox sangat menarik. Bayangkan dengan mudah mencipta bentuk dinamik, seperti kotak pernafasan yang ditunjukkan di bawah, menggunakan elemen HTML tunggal dan CSS minimum - tiada SVGs atau senarai titik poligon yang panjang diperlukan!

Chris berpotensi ini juga. Kemungkinan kelihatan tidak berkesudahan.

Walau bagaimanapun, semangat saya dengan cepat merosot apabila pemeriksaan yang lebih dekat. Walaupun clip-path: path() berfungsi dalam Firefox (versi 63-70 dengan bendera tertentu didayakan, dan 71 tanpa), batasan yang ketara muncul: koordinat laluan adalah berasaskan piksel. Ini bermakna mereka tidak skala secara responsif.

Contoh MDN, menggunakan nilai piksel dalam fungsi path() , menyerlahkan isu ini. Fungsi path() menerima SVG<path></path> String, yang koordinat, seperti atribut d dalam SVG, adalah piksel tanpa unit. Tidak seperti viewBox SVG, piksel ini tetap tetap dalam fungsi CSS path() , mencegah penskalaan responsif.

Ini menjadikan fungsi ini sebahagian besarnya tidak praktikal untuk reka bentuk responsif. Unsur responsif yang dipotong dengan path() mengekalkan kawasan yang dipotong tetap tanpa mengira saiznya. Sebagai contoh, skala persegi dengan viewport akan mempunyai bentuk jantung yang bersaiz statik.

Batasan ini sangat mengehadkan kegunaan clip-path: path() . Anggaran SVG atau Polygon () kekal sebagai alternatif yang lebih baik untuk kebanyakan senario. Penambahbaikan adalah penting untuk membuat clip-path: path() pilihan yang berdaya maju.

Amelia Bellamy-Royds mencadangkan dua penyelesaian:

1. Sokongan calc() Nilai/Unit dalam Data Laluan. Ini akan memanjangkan sintaks laluan SVG.
2. Memperkenalkan viewBox dalam perisytiharan clip-path , yang membolehkan penskalaan.

Saya suka pilihan pertama. Yang kedua, sambil menghapuskan keperluan untuk SVG yang berasingan, menawarkan kelebihan terhad berbanding menggunakan SVG secara langsung, yang menikmati sokongan yang lebih luas. Pilihan pertama, bagaimanapun, akan meningkatkan clip-path: path() , berpotensi melampaui SVG dalam kemudahan untuk aplikasi tertentu.

Pertimbangkan contoh kotak pernafasan. Pelaksanaan SVG memerlukan konfigurasi viewBox yang teliti untuk memusatkan bentuknya. Kod SCSS, menggunakan perintah viewBox dan Path (M, V, H), menghasilkan rentetan laluan yang diperlukan.

Walau bagaimanapun, mewujudkan kesan pernafasan memerlukan lengkung bézier kuadrat (Q), yang memerlukan definisi laluan yang lebih kompleks untuk kedua -dua "bengkak" dan "squished" keadaan. Ini membawa kepada CSS yang panjang dan berulang.

Idealnya, menggunakan clip-path: path() dengan sokongan calc() dan sifat tersuai akan membolehkan kawalan dinamik ke atas bentuk. Harta tersuai, seperti --sgn , dapat mengawal tanda dalam calc() , yang membolehkan animasi di antara negeri -negeri dengan definisi jalan tunggal. Ini akan memudahkan kod dan memastikan skala responsif. Walau bagaimanapun, pada masa ini, clip-path: path() tidak berpotensi.

Atas ialah kandungan terperinci Malangnya, laluan klip: jalan () masih tidak pergi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!