Bagaimana untuk Mencipta Laluan Klip Responsif dengan SVG Sebaris?

Laluan Klip Responsif dengan SVG Sebaris

Apabila menggunakan SVG untuk mencipta laluan klip untuk elemen dengan latar belakang, adalah penting untuk memahami cara viewBox dan preserveAspectRatio berfungsi. Atribut viewBox mentakrifkan dimensi kandungan SVG, manakala preserveAspectRatio menentukan cara kandungan itu diskalakan dan dipasang dalam elemen.

Dalam coretan kod anda, anda menggunakan laluan klip pada elemen pengepala dengan ketinggian 100px:

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}</code>

Walau bagaimanapun, SVG anda mempunyai kotak paparan "0 0 4000 1696", bermakna laluan klip sedang digunakan dengan lebar 4000px. Ini mungkin jauh lebih besar daripada lebar sebenar elemen pengepala, itulah sebabnya anda tidak melihat kesan yang diingini.

Untuk mencipta laluan klip responsif, anda perlu mentakrifkan Kotak pandangan SVG untuk memadankan dimensi elemen yang digunakan padanya. Anda juga boleh menggunakan atribut clipPathUnits untuk menentukan bahawa laluan ditakrifkan dalam unit berbanding dengan kotak sempadan elemen:

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}

#myClip {
  clipPathUnits: objectBoundingBox;
}</code>

Dengan perubahan ini, SVG akan diskalakan agar sesuai dengan dimensi pengepala elemen, dan laluan klip akan digunakan dengan betul.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Laluan Klip Responsif dengan SVG Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!