JavaScript - Poruszanie plikiem SVG za pomocą klawiatury.

Question

Witam mam kod na poruszanie się postaci, wygląda następująco:

const player = document.querySelector('.player');

    //Sprawdzanie rotacji postaci
    var rotation = 0;

    //Ruchliwosc postaci
    var distance = 30;
    var distance2 = 20;

    //Ładowanie strzału
    var shotLoading = 0;

const move = (e) => {

    switch(e.keyCode) {

        case 65: //Strzałka w lewo
            if (rotation == -90) {
                player.style.left = player.offsetLeft - distance +'px';
                break;
            } else {
                player.style.transform = "rotate(-90deg)";
                rotation = -90;
                break;
                }

        case 68: //Strzałka w prawo
            if (rotation == 90) {
                player.style.left = player.offsetLeft + distance2 +'px';
                break;
            } else {
                player.style.transform = "rotate(90deg)";
                rotation = 90;
                break;
                }

        case 87: //Strzałka w górę
            if (rotation == 0) {
                player.style.top = player.offsetTop - distance +'px';
                break;
            } else {
                player.style.transform = "rotate(0deg)";
                rotation = 0;
                break;
                }

        case 83:  //Strzałka w dół
            if (rotation == 180) {
                player.style.top = player.offsetTop + distance2 +'px';
                break;
            } else {
                player.style.transform = "rotate(180deg)";
                rotation = 180;
                break;
                }

        case 32:  //Spacja
            if (shotLoading == 0) {
                shotLoading = 10;
                break;
            } else {
                alert('noShot');
                break;
                }
    }
}
window.addEventListener("keydown", move);

Cały kod działa poprawnie, gdy obiekt klasy "player" jest wczytywany za pomocą: <img class="player" src="img/tank.svg"> .

Natomiast, gdy chcę animować poszczególną sekcje obrazka svg (Dodaję cały kod svg do pliku html i nadaję mu klasę "player") wykonuje się tylko rotate, a przesuwanie się obiektu nie działa.

 

Proszę o pomoc.

Comments

Czy w konsoli są jakieś błędy? Sprawdź jakie wartości mają propertisy odpowiedzialne za przesuwanie (player.style.top itd.) - może nie są prawidłowo konkatenowane przy obsłudze eventu.

---

Konsola nie wyrzuca błędów.

Domyślnie top i left mam ustawione na 50% ale gdy plik svg jest wczytywany poprzez <img> porusza się poprawnie.

Przy próbie poruszania się top i left nie zmieniają swoich wartości w pliku css.

---

Przy próbie poruszania się top i left nie zmieniają swoich wartości w pliku css.

Modyfikacji styli obiektu player dokonujesz w formie inline, a takie style nie są widoczne w arkuszu CSS, a na poszczególnych elementach HTML. Jeśli chcesz zobaczyć czy zmienia się styl inline obiektu, to sprawdź przez inspektor elementów (prawym przycisk na element na stronie i "zbadaj element"). Możesz też wypisać w konsoli poszczególne style po ich modyfikacji.

---

No to i tak właściwości się nie zmieniają.