Ruch obiektu po zadanym kształcie.

0

Witam wszystkich bardzo serdecznie,
Jestem bardzo początkujący w javascript potrzebuję pomocy w zadaniu dotyczącym ruchu.
Napisałem taki kod realizujący ruch obiektu po elipsie.

<!DOCTYPE html>
<html>
<body onLoad="do_script()">
<svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">
  <circle id="super_circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<script>
		var circle = document.getElementById("super_circle");
		(function(){
    		// elipsa
		var wys = window.innerHeight /2;
		var sze = window.innerWidth /2;
		var seconds = new Date().getTime() / 1000;
		var r = sze-100;
		var speed = 1;
		var t = speed * seconds;
		var x = sze + r * Math.cos(t);
		var y = wys + r * Math.cos(t) * Math.sin(t);
		circle.setAttributeNS(null, "cx", x);
		circle.setAttributeNS(null, "cy", y);
    		setTimeout(arguments.callee, 10);
	})();
</script>
</body>
</html>

Mam takie pytanie, jak dopasować ten kawałek kodu

xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">

aby automatycznie pobierał rozmiar okna.

oraz jak zmienić ten kod aby ruch odbywał się po obrysie okna tzn. jak najbliżej krawędzi okna, po prostokącie, nie wiem czy dobrze to wyjaśniłem.

Z góry dziękuję za pomoc.

0

Mógłbyś to ustawić w css

svg {
   width: 100%;
   height: 100%;
}

Ewentualnie możesz się zainteresować takimi jednostkami jak vw/vh.

1 użytkowników online, w tym zalogowanych: 0, gości: 1