이 SVG에서 눈이 커서를 따라가도록 만드세요.

Question

이 튜토리얼을 사용하여 svg의 눈동자가 커서를 따르도록 만들려고 합니다.

https://dev.to/anomaly3108/make-svg-follow-cursor-using-css-and-js-2okp

4개의 div가 있습니다:

1. 왼쪽 눈알
2. eyeball_right
3. 학생이 나갔습니다
4. pupil_right

JS가 작동하는 것 같은데 각도가 올바르지 않습니다. 학생이 너무 높은 위치에 있어 올바른 위치를 유지할 수 없습니다.

으아아아 으아아아 으아아아

Answer 1

여기서의 기본 아이디어는 선 요소를 사용하여 눈의 회전/방향을 결정한다는 것입니다. 선의 양쪽 끝과 중앙에 표시가 있을 수 있습니다. 이 예에서 눈알은 마커이며 마우스 위치에 따라 선의 끝을 업데이트합니다.

먼저 개요가 포함된 간단한 예를 본 다음 전체 예를 살펴보세요.

으아악 으아악

으아악 으아악 으아악