• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kurioses Problem mit svg

hallo1234

Neues Mitglied
  1. Wenn ich folgende Website lokal aufrufe ist das Image zwar in F12 sichtbar aber hat weder höhe noch breite, kurz wird nicht angezeigt
  2. wenn ich die Website aber in irgendeinem online live editor starte geht alles.
3. so sieht das im browser aus <image href="spaceship.png" width="20" height="20" x="20" y="20"></image>
wenn ich IM BROWSER daraus <image href="spaceship.png" width="20" height="20" x="20" y="20"/> masche ändert der Browser es wieder zu
<image href="spaceship.png" width="20" height="20" x="20" y="20"></image> und es geht alles......

HTML:
<!DOCTYPE html>
<html lang="en" style="overflow: hidden; width: 100%; height: 100%">
<head>
    <meta charset="UTF-8">
    <title>WebSite</title>
</head>
<body onload="main();" onkeydown="Keyboard.keyEvent(event.keyCode, true)" onkeyup="Keyboard.keyEvent(event.keyCode, false)" style="margin: 0px; width: 100%; height: 100%">
    <svg id="gameField" viewBox="0 0 100 100" width="100%" height="100%">

    </svg>

    <script>
        function main()
        {
            var shipImg = document.createElement("image");
            shipImg.setAttribute("href", "spaceship.png");
            shipImg.setAttribute("width", 20);
            shipImg.setAttribute("height", 20);
            shipImg.setAttribute("x", 20);
            shipImg.setAttribute("y", 20);
            document.getElementById("gameField").appendChild(shipImg);
            //document.getElementById("gameField").update(); FAIL
            var ship = new Ship(shipImg);
        }

        var Keyboard =
        {
            KeyMap:
            {
                Up: 38,
                Down: 40,
                Left: 37,
                Right: 39
            },
            pressedKeys: new Array(),

            keyEvent: function keyEvent(key, press)
            {
                if(press)
                {
                    if(this.pressedKeys.indexOf(key) == -1)
                    {
                        this.pressedKeys.push(key);
                    }
                }
                else
                {
                    this.pressedKeys.splice(this.pressedKeys.indexOf(key), 1);
                }
            },

            isKeyDown: function(key)
            {
                return this.pressedKeys.indexOf(key) != -1;
            }
        }

        class Ship
        {
            renderElement = null;

            pos =
            {
                x: 0,
                y: 0
            };

            constructor(renderElement)
            {
                this.renderElement = renderElement;

                setInterval(function()
                {
                    if(Keyboard.isKeyDown(Keyboard.KeyMap.Up))
                    {
                        console.log("UP");
                    }
                    if(Keyboard.isKeyDown(Keyboard.KeyMap.Down))
                    {
                        console.log("Down");
                    }
                    if(Keyboard.isKeyDown(Keyboard.KeyMap.Left))
                    {
                        console.log("Left");
                    }
                    if(Keyboard.isKeyDown(Keyboard.KeyMap.Right))
                    {
                        console.log("Right");
                    }
                }, 10);
            }
        }
    </script>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
kann mir mal das einer erklären
Code:
  document.getElementById("gameField").update();
update() ? ist das ein normaler Javascript Code ? Meine Console meckert da nur .
Beim Goggeln konnte ich nur was finden das es update() bei irgendeiner bibiliothek oder sowas gibt.
Habe ich da irgendwas übersehen ?
 
update() ? ist das ein normaler Javascript Code ? Meine Console meckert da nur .
Beim Goggeln konnte ich nur was finden das es update() bei irgendeiner bibiliothek oder sowas gibt.
Habe ich da irgendwas übersehen ?
update() gehört in diesem Falle wahrscheinlich zum Prototype Framework.
Ansonsten hast du recht, es gehört hier eigentlich nicht in VanillaJS rein, zumal Prototype eh den Syntax von jQuery oder wahrscheinlich jQuery selbst verwendet. Du müsstest also eigentlich $(".class").update('new content') schreiben.
 
Zuletzt bearbeitet:
Werbung:
Werbung:
mir ist schon klar das hier ein namespace angegeben wird aber warum geht createElement nicht

Ich würde mal behaupten weil das Element "image" im HTML-Namespace nicht bekannt ist, bzw. eine andere Funktion hat als in SVG. Du versuchst also einem SVG ein HTML-Element hinzuzufügen. SVG und HTML sind aber nicht das selbe.

Da JS unabhängig vom DOM agiert, musst du den Namespace angeben, damit JS weiß es handelt sich um ein SVG-Element. So zumindest meine Theorie.
 
Zurück
Oben