この SVG で目がカーソルを追うようにします

Question

このチュートリアルを使用して、SVG の瞳孔をカーソルに追従させようとしています:

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

4 つの div があります:

1. 左眼球
2. 目玉右
3. 学生は退席しました
4. 瞳孔右

JS は動作しているようですが、角度が正しくありません。生徒の位置が高すぎて、正しい位置に留まることはできません。

リーリー リーリー リーリー

Answer 1

ここでの基本的な考え方は、線要素を使用して目の回転/方向を決定するということです。線の両端と中央にマークを付けることができます。この例では、目玉がマーカーであり、マウスの位置に基づいて線の終端を更新します。

最初に概要を含む簡単な例を示し、次に完全な例を示します:

リーリー リーリー

リーリー リーリー リーリー