Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <svg id="masterSVG" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1900" height="930">
        <rect id="rect" x="0" y="90" width="150" height="150" style="fill:red; fill-opacity:0; stroke:blue; stroke-opacity:1" />

        <!-- Prostokąt wykonany moim sposobem -->
        <rect id="rect1" x="1000" y="100" width="100" height="100" style="fill:red" />

        <!-- Sposób wykorzystujący animacje svg -->
        <rect id="rect2" x="1000" y="100" width="100" height="100" style="fill:green">
            <animate attributename="x" attributetype="XML" from="1000" to="-1000" begin="2" dur="10s" fill="freeze" repeatcount="indefinite" />
        </rect>

        <script>
            //funckja przesuwająca prostokąt
            function move(deltaTime) {
                //deltaTime dostosowuje prędkość obiektu do ilości wyświetlonych klatek na sekundę

                var rect1 = document.getElementById("rect1"); //obiekt o id rect1
                var speed = 10 * deltaTime; //predkosc

                rect1.setAttribute("x", rect1.getAttribute("x") - speed); //przesunięcie obiektu o "speed"

                var xPosition = rect1.getAttribute("x"); //pozycja x
                console.log(xPosition);
            }

            //co to jest requestAnimationFrame: http://creativejs.com/resources/requestanimationframe/
            var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            null;

            //sprawdzam czy przeglądarka obsługuje requestAnimationFrame
            if (animFrame !== null) {
                //jest obsługiwane
                var recursiveAnim = function () {
                    mainloop();
                    animFrame(recursiveAnim); //funkcja wykonuje samą siebie; jest nieskończona pętla
                };
                animFrame(recursiveAnim); //animFrame działa tak, że wykonuje funkcję tak szybko, jak przeglądarka będzie na to gotowa
            } else {
                //nie jest obsługiwane, użyj setInterval aby zapętlić wykonywanie funkcji
                var ONE_FRAME_TIME = 1000.0 / 60.0;
                setInterval(mainloop, ONE_FRAME_TIME);
            }

            var lastUpdate = Date.now();

            //główna pętla gry
            var mainloop = function () {
                var now = Date.now();
                var fps = 1000 / (now - lastUpdate); //ilość klatek na sekundę
                var dt = (now - lastUpdate) / 10; //obliczanie deltaTime
                lastUpdate = now;

                move(dt);
            }
        </script>
    </svg>
</body>
</html>