ClipPathを使用してボトルを色で塗りつぶすにはどうすればよいですか
P粉690200856
P粉690200856 2023-09-09 14:53:51
0
2
420

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

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

リーリー リーリー

P粉690200856
P粉690200856

全員に返信(2)
P粉343141633

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

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

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

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

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

リーリー

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

いいねを押す +0
P粉593649715

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!