Bagaimanakah saya boleh mengisi botol dengan warna menggunakan clipPath

Question

Saya ada gambar botol dan cuba isi botol ini dengan warna tertentu

Saya jumpa koordinat isian tetapi latar belakang di dalam botol tidak diisi

.item {
  width: 150px;
  height: 150px;
}

#tubeLiquid {
  background-color: #74ccf4;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

#bottleMask{
  background-color: #FFFFFF;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

<div class="item">
  <svg viewBox="0 0 300 300">
    <image
      width="300"
      clip-path="url(#bottleMask)"
      xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png"
    ></image>
    <defs>
      <mask id="bottleMask"></mask>
    </defs>
    <g id="maskedLiquid" mask="url(#bottleMask)">
      <path id="tubeLiquid" fill="#74ccf4"></path>
    </g>
  </svg>
</div>

Answer 1

Anda tidak memerlukan tambahan .
Oleh kerana bentuk botol, anda boleh menggunakan bulatan sebagai laluan keratan:

waterLevel.addEventListener('input', e => {
  let value = +e.currentTarget.value
  tubeLiquid.setAttribute('stroke-dasharray', `${value} 100`)
})

svg {
  width: 20%;
}

<h3>Draw clip-path</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <!-- test clip path -->
    <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
  </svg>

<h3>Draw liquid fill</h3>
<svg viewBox="0 0 300 300">
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line x1="149.5" y1="290" x2="149.5" y2="50" stroke="green" stroke-width="70" />
  </svg>

<h3>Apply clip path</h3>
<p><input type="range" min="0" max="100" value="100" id="waterLevel" name="water-level" /></p>
<svg viewBox="0 0 300 300">
    <clipPath id="clip">
          <rect x="115" y="55" width="69" height="235" rx="20" ry="20" fill="red" />
    </clipPath>
    <image width="300" href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <line id="tubeLiquid" clip-path="url(#clip)" pathLength="100" stroke-dasharray="100 100" x1="149.5" y1="290" x2="149.5" y2="50" stroke="#74ccf4" stroke-width="80" />
  </svg>

Mula-mula lukis laluan keratan dan isi skala/bentuk bar kemajuan - tanpa memotong apa-apa - untuk mencari koordinat dan dimensi yang betul.

Anda kemudian boleh menggunakan laluan keratan.
Saya menggunakan set atribut 元素，因为它允许我们将 pathLength kepada 100 untuk elemen "tubeLiquid".

Kami boleh menukar nilai isian semasa dengan mudah dengan mengemas kini atribut lines-dasharray:

// show 100 %
stroke-dasharray="100 100"

// show 50 %
stroke-dasharray="50 100"

Anda akan dapati banyak contoh menggunakan kaedah ini untuk melaksanakan pelbagai pengukur dinamik/bar kemajuan atau carta pai animasi, seperti "Tetapkan peratusan bar kemajuan svg dalam JavaScript"

Answer 2

Penyelesaian terdekat yang saya temui ialah saya tidak mengisi keseluruhan botol, tetapi anda hanya perlu menukar beberapa koordinat dalam poligon, saya tidak faham bentuk dan poligon.

<style>
.item {
  width: 150px;
  height: 150px;
}

#tubeLiquid {
  background-color: #74ccf4;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}

#bottleMask{
  background-color: #FFFFFF;
  clip-path: polygon(45% 19%, 41% 22%, 41% 29%, 41% 36%, 41% 43%, 41% 50%, 41% 57%, 41% 63%, 41% 70%, 41% 77%, 41% 83%, 41% 90%, 43% 93%, 50% 92%, 56% 93%, 60% 88%, 59% 81%, 60% 75%, 60% 68%, 60% 61%, 59% 55%, 59% 48%, 59% 42%, 59% 35%, 59% 29%, 58% 23%, 54% 19%);
}</style>

<div class="item">
  <svg viewBox="0 0 300 300">
    <defs>
      <mask id="bottleMask" fill="white">
        <path d="M0,0h300v300H0V0z M89,68h122v147H89V68z" />
      </mask>
      <clipPath id="liquidClip">
        <path d="M89,68h122v147H89V68z" />
      </clipPath>
    </defs>
    <image width="300" xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" />
    <path id="tubeLiquid" fill="#74ccf4" d="M0,0h300v300H0V0z" clip-path="url(#liquidClip)" mask="url(#bottleMask)" />
  </svg>
</div>