Bagaimana untuk Mencipta Laluan Klip Responsif dengan SVG Sebaris?

Laluan Klip Sebaris SVG Responsif

Anda menghadapi masalah dengan mencipta laluan klip responsif menggunakan SVG sebaris. Walaupun mempunyai SVG responsif, laluan klip yang digunakan tidak berskala dengan betul.

Isunya mungkin terletak pada kaedah rujukan laluan klip dalam SVG. Apabila mentakrifkan laluan klip dalam SVG sebaris, merujuk SVG itu sendiri untuk laluan klip bukanlah pendekatan yang betul.

Penyelesaian adalah untuk mencipta definisi laluan klip dalam SVG; bahagian dan rujuk takrifan itu daripada elemen yang anda ingin gunakan laluan klip, menggunakan atribut laluan klip.

Berikut ialah contoh:

<code class="html"><svg width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <clipPath id="myClip">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg>

<header id="block-header">
  <svg width="0" height="0">
    <defs>
      <clipPath id="myClip" clipPathUnits="objectBoundingBox">
        <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
      </clipPath>
    </defs>
  </svg>
</header></code>

Dalam contoh ini:

• Atribut preserveAspectRatio dalam SVG pertama ditetapkan kepada tiada untuk menghalang SVG daripada memutarbelitkan nisbah bidang apabila diubah saiznya.
• SVG di dalam elemen pengepala mempunyai saiz sifar untuk mengelakkan daripada mencipta sebarang elemen pada halaman.
• Atribut clipPathUnits dalam definisi laluan klip ditetapkan kepada objectBoundingBox, yang bermaksud sistem koordinat laluan klip adalah berdasarkan elemen yang digunakan.

Ini memastikan laluan klip berskala responsif dengan elemen bekas.

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!