Masalah:

Saya telah membuat SVG Clip Path yang harus responsif, tetapi ketika saya mencoba menggunakan clipPathUnits="objectBoundingBox" di tag clip path, objek target menghilang.

Saya membuat cuplikan contoh dengan dan tanpa. Yang pertama ditampilkan seperti yang diharapkan, tetapi yang kedua benar-benar tersembunyi.

Saya telah mengujinya dengan berbagai bentuk dan jalur sederhana yang berfungsi dengan baik, tetapi saya tidak dapat membuat clipPathUnits="objectBoundingBox" bekerja dengan sesuatu yang lebih rumit, tidak yakin apa yang saya lewatkan.

Potongan:

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" >
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

Sumber daya:

https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits

https://www.sarasoueidan.com/blog/css-svg-clipping/

1
GibsonFX 10 Juli 2020, 15:37

1 menjawab

Jawaban Terbaik

Saat menggunakan clipPathUnits="objectBoundingBox" lebar dan tinggi kotak pembatas objek dari jalur kliping dianggap memiliki nilai panjang 1 satuan.

Untuk mencapai ini, Anda perlu menulis ulang atribut d dari jalur atau Anda dapat menskalakan jalur. Dalam hal ini saya menggunakan transform="scale(0.00118,0.0017)"

 <clipPath id="wav" clipPathUnits="objectBoundingBox">
            <path transform="scale(0.00118,0.0017)" id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.....

Untuk mengetahui nilai apa yang digunakan

  1. Saya mendapatkan kotak pembatas jalan:

    biarkan bb=thePath.getBBox();

  2. Saya menggunakan bb.width dan bb.height untuk mendapatkan skala:

    misalkan sx = 1/bb.lebar; misalkan sy = 1/bb.height

  3. Saya menskalakan jalur:

    thePath.setAttribute("transform", scale(${sx},${sy}))

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.00118,0.0017)"  id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

Ini dari artikel Sara Soueidan:

ketika Anda menggunakan nilai objectBoundingBox, koordinat yang ditentukan untuk konten <clipPath> harus dalam kisaran [0, 1]

Dan ini dari MDN:

objectBoundingBox Nilai ini menunjukkan bahwa semua koordinat di dalam elemen relatif terhadap kotak pembatas elemen yang diterapkan jalur kliping. Artinya asal sistem koordinat adalah sudut kiri atas kotak pembatas objek dan lebar dan tinggi kotak pembatas objek dianggap memiliki nilai panjang 1 satuan.

2
enxaneta 10 Juli 2020, 17:22