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

Question

ボトルのイメージがあり、このボトルを特定の色で満たしてみます

塗りつぶし座標は見つかりましたが、ボトル内の背景が塗りつぶされていません。

リーリー リーリー

Answer 1

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

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

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

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

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

リーリー

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

Answer 2

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

リーリー