kameleon

kleur van een html element (svg object) aanpassen met javascript

by Tobias Beuving

HTML

<html>
<head>
<title>Hoi kameleon</title>
</head>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="kameleon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="250px" height="250px" viewBox="0 0 31.637 31.637" style="enable-background:new 0 0 31.637 31.637;"
   fill = "#ff0000"
	 xml:space="preserve">

	<g>
		<circle cx="7.676" cy="7.067" r="0.827"/>
		<path...

JavaScript

var el = document.getElementById('kameleon');
var oudeKleur = el.getAttribute('fill');
console.log('oudeKleur', oudeKleur);
var nieuweKleur = '#23ff50';
el.setAttribute('fill', nieuweKleur);

/*
we willen dat de kameleon een random kleur krijgt
dat doen we door de rgb kleur te 
*/

var hexString = "0123456789abcdef";

function geefRandomHexGetal() {
//Tussen1en16
	var randomGetal = Math.random() * 16;
 var goeiePositie = Math.round(randomGetal - 1);
 return hexString.substr(goeiePositie, 1);
}

var hexRGBKleur = "";

for (var i = 0; i < 6; i++) {
 var hexGetal = geefRandomHexGetal();
 hexRGBKleur = hexRGBKleur + hexGetal;
}

hexRGBKleur = '#' + hexRGBKleur;
console.log('hexRGBKleur', hexRGBKleur);
el.setAttribute('fill', hexRGBKleur);