<!DOCTYPE html>
<svg id="image" width="640" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
.human *:hover{
stroke: #ff0000;
}
</style>
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g class="human">
<circle id="svg_1" r="37.735924" cy="76" cx="291" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse ry="56" rx="22" id="svg_3" cy="177" cx="293" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse rx="4" id="svg_13" cy="128" cx="251" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse transform="rotate(-28.4429 235 156)" ry="5" rx="38" id="svg_14" cy="156" cx="235" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse transform="rotate(67.249 327 275)" ry="4" rx="44" id="svg_15" cy="275" cx="327" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse id="svg_16" transform="rotate(36.5289 346 159.5)" ry="5" rx="38" cy="159.5" cx="346.000008" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
<ellipse id="svg_17" transform="rotate(110.353 260 275.5)" ry="4" rx="44" cy="275.5" cx="260" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff"/>
</g>
</svg>
<div>
<label>R:<input type="range" id="r" min="0" max="255" value="255" /></label>
<label>G:<input type="range" id="g" min="0" max="255" value="255" /></label>
<label>B:<input type="range" id="b" min="0" max="255" value="255" /></label>
<script>
var onchange = function() {
var channels = sliders.map(function(slider){
return slider.value;
});
var color = 'rgb(' + channels + ')';
var parts = image.querySelectorAll('.human *');
for (var i = 0, part; part = parts[i]; i++) {
part.style.fill = color;
}
};
var sliders = [r,g,b];
sliders.forEach(function(slider){
slider.onchange = onchange;
});
</script>
</div>