Wie kann ich die Flasche mit ClipPath mit Farbe füllen?

Question

Ich habe ein Bild von einer Flasche und versuche, diese Flasche mit einer bestimmten Farbe zu füllen

Ich habe die Füllkoordinaten gefunden, aber der Hintergrund in der Flasche ist nicht gefüllt

.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

您不需要额外的。
由于瓶子的形状，您可以使用圆形 作为剪辑路径：

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>

首先绘制剪辑路径和填充比例/进度条形状 - 不剪辑任何内容 - 以找到正确的坐标和尺寸。

然后您可以应用剪辑路径。
我为“tubeLiquid”元素使用了 元素，因为它允许我们将 pathLength 属性设置为 100。

我们可以通过更新 lines-dasharray 属性轻松更改当前填充值：

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

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

您会发现很多关于使用此方法实现各种动态仪表/进度条或动画饼图的示例，例如“在 JavaScript 中设置 svg 进度条百分比”

Answer 2

我发现的最接近的解决方案是我没有装满整个瓶子，但你只需要更改多边形中的一些坐标，我不了解形状和多边形。

<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>