Bagaimana untuk Menjadikan Laluan Klip SVG Dalam Talian Responsif?

Laluan Klip Responsif dengan SVG Sebaris

Isu:

Laluan klip ditentukan menggunakan SVG sebaris tidak menggunakan kelengkungan yang diingini pada elemen induk.

Analisis:

Dalam kod yang disediakan, rujukan clipPath digunakan pada elemen dengan latar belakang. Walau bagaimanapun, laluan klip tidak kelihatan seperti yang dimaksudkan.

Sebab:

Laluan klip yang dirujuk oleh url(#myClip) ditakrifkan dengan dimensi mutlak dalam SVG sebaris. Apabila digunakan pada elemen induk, dimensi laluan klip tidak diskalakan agar sesuai dengan saiz elemen, menyebabkan kelengkungan tidak dapat dilihat.

Penyelesaian:

Kepada cipta laluan klip responsif yang berskala dengan elemen induk, atribut clipPathUnits hendaklah ditetapkan kepada "objectBoundingBox" pada definisi clipPath. Ini akan memastikan bahawa dimensi laluan klip adalah relatif kepada kotak sempadan unsur induk, menjadikannya responsif.

Kod Kemas Kini:

<code class="html"><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>

Dengan menetapkan clipPathUnits kepada "objectBoundingBox", laluan klip akan berskala secara automatik untuk memadankan saiz elemen induk, memastikan kelengkungan kelihatan dan bertindak balas kepada perubahan dalam saiz elemen.

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