ClipPathを使用してボトルを色で塗りつぶすにはどうすればよいですか

Question

ボトルの画像があり、このボトルを特定の色で塗りつぶそうとしましたが、塗りつぶし座標は見つかりましたが、ボトル内の背景が塗りつぶされていません。item{width:150px;height:150px;}#tubeLiquid{background-color: #74ccf4 ;クリップパス:ポリゴン(45%19%,41%22%,41%29%,41%36%,41%43%,41%50%,41%57%,41%63%,41 %70 %,41%77%,

P粉343141633 · Answer

追加のは必要ありません。
ボトルの形状により、円をクリッピングパスとして使用できます:

リーリーリーリーリーリー

最初にクリッピングパスを描画し、何もクリッピングせずにスケール/プログレスバーの形状を塗りつぶして、正しい座標と寸法を見つけます。

その後、クリッピングパスを適用できます。
pathLength プロパティを 100 に設定できるため、「tubeLiquid」要素に 要素を使用しました。

lines-dasharray プロパティを更新することで、現在のパディング値を簡単に変更できます:

リーリー

このメソッドを使用してさまざまな 動的ゲージ/進行状況バー、またはアニメーション円グラフ を実装する例が多数あります。たとえば、「JavaScript で SVG プログレスバーのパーセンテージを設定する」

P粉593649715 · Answer

私が見つけた最も近い解決策は、ボトル全体を満たさず、ポリゴン内のいくつかの座標を変更するだけでよいというものでした。私は図形やポリゴンについてあまり知りません。

リーリー