ClipPath를 사용하여 병에 색상을 채우는 방법

Question

병 이미지가 있는데 이 병에 특정 색상을 채워보려고 합니다

채우기 좌표를 찾았는데 병 안의 배경이 채워지지 않아요

으아악 으아악

Answer 1

추가로 필요하지 않습니다 .
병의 모양으로 인해 원 을 클리핑 경로로 사용할 수 있습니다.

으아악 으아악 으아악

먼저 클리핑 경로를 그리고 아무것도 클리핑하지 않고 배율/진행률 표시줄 모양을 채워 올바른 좌표와 치수를 찾습니다.

그런 다음 클리핑 패스를 적용할 수 있습니다.
저는 "tubeLiquid" 요소에 100으로 설정된 元素，因为它允许我们将 pathLength 속성을 사용했습니다.

lines-dasharray 속성을 업데이트하여 현재 채우기 값을 쉽게 변경할 수 있습니다.

으아악

이 방법을 사용하여 "JavaScript에서 svg 진행률 표시줄 비율 설정" 과 같은 다양한 동적 게이지/진행률 표시줄 또는 애니메이션 원형 차트

를 구현하는 많은 예를 찾을 수 있습니다.

Answer 2

제가 찾은 가장 가까운 해결책은 병 전체를 채우지 않고 다각형에서 일부 좌표만 변경하면 된다는 것이었습니다. 저는 모양과 다각형을 이해하지 못합니다.

으아악