• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

svg line tag się nie wyświetla

VPS Starter Arubacloud
0 głosów
265 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez PiotrG25 Nowicjusz (120 p.)

Ta aplikacja powinna wyświetlać ładne wzorki wewnątrz okręgu. Inspirowana była tym odcinkiem Mathologer'a: https://www.youtube.com/watch?v=qhbuKbxJsk8

Kod JavaScriptu działa poprawnie dla całkowitego mnożnika i chciałem go rozwijać ale ciężko się testuje gdy nie widać efektu :)

Problem polega na tym, że element <line> dodawany jest do wnętrza <svg> ale przeglądarka go nie pokazuje. Sposób na debugowanie jaki ja odkryłem to: W inspektorze strony w przeglądarce(Ctrl + Shift + i) wybieramy tag svg, klikamy prawym przyciskiem myszki i edytujemy go jako HTML, kopiujemy dowolny tag <line>, wklejamy go obok i klikamy poza tagiem <svg>. Strona powinna pokazać teraz wygenerowany efekt.

Nie mam pojęcia z czym to jest związane. Jeśli ma ktoś jakiś pomysł jak to rozwiązać, to proszę śmiało pisać. Jak nie to przynajmniej zobaczycie fajne wzorki :)

<!DOCTYPE html>
<html>
<head>
	<title>Time Tables</title>
	<meta charset="utf-8"/>
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="app.js"></script>

</head>
<body>
	<form action="#">
		<label>
			points on the circle:<br/>
			<input id="points" type="number" value="10"/>
		</label><br/>
		<label>
			times:<br/>
			<input id="times" type="number" step="0.1" value="2.0"/>
		</label><br/>
	</form>
	<svg>
		<line x1="200" y1="0" x2="0" y2="200"/>
	</svg>
</body>
</html>
body{
	text-align: center;
}

svg{
	margin-top: 10px;
	width: 500px;
	height: 500px;
}

line{
	stroke: black;
	stroke-width: 1px;
}

$(function(){
	function Line(x1, y1, x2, y2){
		var svg = $("svg");
		var line = $('<line x1="'+ x1 +'" y1="'+ y1 +'" x2="'+ x2 +'" y2="'+ y2 +'"/>');
		svg.append(line);
	}

	function pLine(P1, P2){
		Line(P1.x, P1.y, P2.x, P2.y);
	}

	function P(x, y){
		this.x = x;
		this.y = y;
	}
	

	var S = new P(250, 250);
	var radius = 200;

	var points = 10;
	var pointsElement = $("#points");
	
	pointsElement.on("input", function(){
		points = parseInt(this.value);
		doThis();
	});

	
	var times = 2.0;
	var timesElement = $("#times");
	
	timesElement.on("input", function(){
		times = parseFloat(this.value);
		doThis();
	});
	
	
	function doThis(){
		var svg = $("svg");
		svg.children().each(function(index, element){
			$(element).remove();
		});
		
		console.log(points, times);
		
		var alpha = Math.PI * 2 / points ;
		var circlePoints = [];

		for(var i = 0; i < points; i++){
			circlePoints.push(new P(
				parseInt(S.x + radius * Math.cos(i * alpha)),
				parseInt(S.y + radius * Math.sin(i * alpha))
			));
		}
		
		for(var i = 0; i < points; i++){
			pLine(
				circlePoints[i],
				circlePoints[(i * times) % points]
			);
		}
	};
	
	doThis();
	
});

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 452 wizyt
0 głosów
1 odpowiedź 123 wizyt
pytanie zadane 17 grudnia 2018 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 1,341 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...