javascriptでカーソルの原点を動的に変更しますか？

Question

画像のx、y位置を定義できるように、javascriptでカーソルにアクセスする方法はありますか？ 私はcssのカーソル用にカスタムのdata-uriを設定しました。全体を再定義することなく動的にオフセットを調整できるようにしたいと考えています。

body{ 
    cursor: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="1" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 H 6 L 12 12 V 18"/></svg>') 24 24, auto; 
} 

どうやってx、yをjavascriptで動的に設定するのですか？

Answer 1

あなたがポインタロックを見たいと思っている場合は、ここではjQueryフリー実装です。

var getPointerLock =() => { 
    if (document.body.mozRequestPointerLock) { 
    document.body.mozRequestPointerLock(); 
    } else if (document.body.requestPointerLock) { 
    document.body.requestPointerLock(); 
    } 
}; 

var x = 0; 
var y = 0; 

document.body.onclick = (evt) => { 
    getPointerLock(); 
    x = evt.clientX; 
    y = evt.clientY; 
}; 

document.body.onmousemove = (evt) => { 
    if (document.pointerLockElement || document.mozPointerLockElement) { 
    x += evt.movementX; 
    y += evt.movementY; 
    document.body.innerHTML = `${x}, ${y}`; 
    } 
}; 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
}