병 이미지가 있는데 이 병에 특정 색상을 채워보려고 합니다
채우기 좌표를 찾았는데 병 안의 배경이 채워지지 않아요
으아악 으아악
추가로 필요하지 않습니다 . 병의 모양으로 인해 원 을 클리핑 경로로 사용할 수 있습니다.
먼저 클리핑 경로를 그리고 아무것도 클리핑하지 않고 배율/진행률 표시줄 모양을 채워 올바른 좌표와 치수를 찾습니다.
그런 다음 클리핑 패스를 적용할 수 있습니다. 저는 "tubeLiquid" 요소에 100으로 설정된 元素,因为它允许我们将 pathLength 속성을 사용했습니다.
pathLength
lines-dasharray 속성을 업데이트하여 현재 채우기 값을 쉽게 변경할 수 있습니다.
lines-dasharray
이 방법을 사용하여 "JavaScript에서 svg 진행률 표시줄 비율 설정" 과 같은 다양한 동적 게이지/진행률 표시줄 또는 애니메이션 원형 차트
제가 찾은 가장 가까운 해결책은 병 전체를 채우지 않고 다각형에서 일부 좌표만 변경하면 된다는 것이었습니다. 저는 모양과 다각형을 이해하지 못합니다.
추가로 필요하지 않습니다
.병의 모양으로 인해 원
을 클리핑 경로로 사용할 수 있습니다.먼저 클리핑 경로를 그리고 아무것도 클리핑하지 않고 배율/진행률 표시줄 모양을 채워 올바른 좌표와 치수를 찾습니다.
그런 다음 클리핑 패스를 적용할 수 있습니다.
저는 "tubeLiquid" 요소에 100으로 설정된
元素,因为它允许我们将pathLength
속성을 사용했습니다.lines-dasharray
속성을 업데이트하여 현재 채우기 값을 쉽게 변경할 수 있습니다.이 방법을 사용하여 "JavaScript에서 svg 진행률 표시줄 비율 설정" 과 같은 다양한 동적 게이지/진행률 표시줄 또는 애니메이션 원형 차트
를 구현하는 많은 예를 찾을 수 있습니다.제가 찾은 가장 가까운 해결책은 병 전체를 채우지 않고 다각형에서 일부 좌표만 변경하면 된다는 것이었습니다. 저는 모양과 다각형을 이해하지 못합니다.
으아악