J'ai l'image d'une bouteille et j'essaie de remplir cette bouteille avec une certaine couleur
J'ai trouvé les coordonnées de remplissage mais le fond à l'intérieur de la bouteille n'est pas rempli
.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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous n'avez pas besoin de plus
En raison de la forme de la bouteille, vous pouvez utiliser un cercle
Dessinez d'abord le chemin de détourage et remplissez la forme de l'échelle/de la barre de progression - sans rien couper - pour trouver les coordonnées et les dimensions correctes.
Vous pouvez ensuite appliquer un chemin de détourage.
J'ai utilisé l'attribut
pathLengthdéfini sur 100 pour l'élément "tubeLiquid".Nous pouvons facilement modifier la valeur de remplissage actuelle en mettant à jour l'attribut
lines-dasharray:Vous trouverez de nombreux exemples d'utilisation de cette méthode pour implémenter diverses jauges dynamiques/barres de progression ou diagrammes circulaires animés, tels que "Définir le pourcentage de la barre de progression svg en JavaScript"
La solution la plus proche que j'ai trouvée était que je ne remplissais pas toute la bouteille, mais qu'il suffisait de changer quelques coordonnées dans le polygone, je ne comprends pas les formes et les polygones.
<style> .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%); }</style> <div class="item"> <svg viewBox="0 0 300 300"> <defs> <mask id="bottleMask" fill="white"> <path d="M0,0h300v300H0V0z M89,68h122v147H89V68z" /> </mask> <clipPath id="liquidClip"> <path d="M89,68h122v147H89V68z" /> </clipPath> </defs> <image width="300" xlink:href="https://i.ibb.co/Mhfwtxp/image-removebg-preview-1.png" /> <path id="tubeLiquid" fill="#74ccf4" d="M0,0h300v300H0V0z" clip-path="url(#liquidClip)" mask="url(#bottleMask)" /> </svg> </div>