我有一个瓶子的图像,并尝试用某种颜色填充这个瓶子
我找到了填充坐标,但瓶子内的背景未填充
.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 进度条百分比”
我发现的最接近的解决方案是我没有装满整个瓶子,但你只需要更改多边形中的一些坐标,我不了解形状和多边形。