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>
您不需要额外的
。由于瓶子的形状,您可以使用圆形
作为剪辑路径:首先绘制剪辑路径和填充比例/进度条形状 - 不剪辑任何内容 - 以找到正确的坐标和尺寸。
然后您可以应用剪辑路径。
我为“tubeLiquid”元素使用了
元素,因为它允许我们将pathLength
属性设置为 100。我们可以通过更新
lines-dasharray
属性轻松更改当前填充值:您会发现很多关于使用此方法实现各种动态仪表/进度条或动画饼图的示例,例如“在 JavaScript 中设置 svg 进度条百分比”
我发现的最接近的解决方案是我没有装满整个瓶子,但你只需要更改多边形中的一些坐标,我不了解形状和多边形。