How can I fill the bottle with color using clipPath-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How can I fill the bottle with color using clipPath

P粉690200856 2023-09-09 14:53:51

457

I have an image of a bottle and try to fill this bottle with a certain color

I found the fill coordinates but the background inside the bottle is not filled

.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%); }

P粉690200856

reply all (2)

P粉3431416332023-09-10 14:35:30 2 floor

You don't need the extra.
Due to the shape of the bottle, you can use the circleas the clipping path:

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

svg { width: 20%; }

Draw clip-path
  Draw liquid fill
  Apply clip path

First draw the clipping path and fill scale/progress bar shape - without clipping anything - to find the correct coordinates and dimensions.

You can then apply a clipping path.
I used theelement for the "tubeLiquid" element because it allows us to set thepathLengthproperty to 100.

We can easily change the current padding value by updating thelines-dasharrayproperty:

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

You will find many examples of using this method to implement variousdynamic gauges/progress bars or animated pie charts, such as"Set svg progress bar percentage in JavaScript"

Like+0

Add Reply

P粉5936497152023-09-10 11:34:50 1 floor

The closest solution I found was I didn't fill the whole bottle, but you just had to change some coordinates in the polygon, I don't know much about shapes and polygons.