Beispiel:SVG-script-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
	<style>

svg {
	height: 410px;
}

#kreis,
#text {
	cursor: pointer;
}

#text {
	font-size: 24px;
	font-weight: bold;
	text-anchor: middle;
}
	</style>
	<script>
document.addEventListener('DOMContentLoaded', function () {
	function changeFill () {
		var farben = new Array(
			'red', 'orange', 'yellow','lime', 'skyblue', 'hotpink');

		var fuellFarbe = Math.floor(farben.length * Math.random());

		if (fuellFarbe == farben.length) {
			fuellFarbe = farben.length-1;
		}

		fuellFarbe = farben[fuellFarbe];
		kreis.setAttribute('fill', fuellFarbe);
	}

	document.getElementById('kreis').addEventListener('click', changeFill);
	document.getElementById('text').addEventListener('click', changeFill);
});
	</script>

	<title>SVG und JavaScript 2</title>
</head>

<body>
	<h1>SVG und JavaScript - <br>Eventhandling - Werte mit setAttribute() ändern</h1>
		<p>Klicken Sie auf den Punkt!</p>
		<svg viewBox="0 0 880 410">
			<circle id="kreis" cx="100" cy="100" r="70" fill="#dfac20" tabindex="0" />
			<text id="text" x="100" y="100">Klick mich!</text>
		</svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-script-2.html&oldid=86843“