JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="247.2px" height="586.7px" viewBox="-181 103.3 247.2 586.7" enable-background="new -181 103.3 247.2 586.7"
	 xml:space="preserve">
<g id="tete">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M-35.3,167.1c4.2-3.5,5.9-12.6,5.9-12.6
		c7-5.4,6.7-13.3,3.5-13.2c-2.7,0.1-2-2.1-2-2.1c4.4-35.5-27.2-37.3-27.2-37.3h-4.8c0,0-31.5,1.8-27.1,37.3c0,0,0.6,2.1-2,2.1
		c-3.3-0.1-3.6,7.8,3.5,13.2c0,0,1.6,9.2,5.9,12.6H-35.3z"/>
</g>
<g id="coup">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M-32.8,188.5c-5.1-7.3-2.2-21.4-2.2-21.4h-44.3
		c0,0,2.9,14.1-2.2,21.4H-32.8z"/>
</g>
<g id="epaule_x5F_droit">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M-108.2,289.4c0,0-9.7-42.6,26.5-100.9
		c0,0-3.4,7.8-27.4,11.4c0,0-23.9,0.2-27.2,32.6l-0.4,47.4L-108.2,289.4z"/>
</g>
<g id="epaule_x5F_gauche">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M-6.1,289.4c0,0,9.7-42.6-26.5-100.9
		c0,0,3.4,7.8,27.4,11.4c0,0,23.9,0.2,27.2,32.6l0.4,47.4L-6.1,289.4z"/>
</g>
<g id="avant-bras_x5F_droit">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M-141.8,392.9c0-0.9,3.1-12.6,11.2-24.9
		c0,0,16.8-29.9,15.8-49.4c0,0-0.2-18.6,6.6-29.2l-28.5-9.5c0,0-1.8,28.1-11.2,43.1c0,0-5.4,9.7-6.1,31.9c0,0-1.6,18.8-3.7,24.7
		L-141.8,392.9z"/>
</g>
<g id="avant-bras_x5F_gauche">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" d="M43.3,379.6c-2.1-5.9-3.7-24.7-3.7-24.7
		c-0.7-22.2-6.1-31.9-6.1-31.9c-9.4-15-11.2-43.1-11.2-43.1l-28.5,9.5c6.8,10.6,6.6,29.2,6.6,29.2c-1,19.5,15.8,49.4,15.8,49.4
		c8.1,12.3,11.2,24,11.2,24.9L43.3,379.6z"/>
</g>
<g id="noclick_main_x5F_droit">
	<path fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10"...

CSS

svg path { cursor: pointer; cursor: hand; }

path {
    fill: white;
    transition: fill 1s;
}

path.selected {
    fill: #3598DA;
}

g:not([id^=noclick]) path:not(.selected):hover {
    fill: #3598DA;
}

JavaScript

$("svg path").click(function(e){
    e.stopPropagation();
    var isClickable = true;
    
    $(this).parents().each(function(index,value){
        var isG = $(value).is("g");
        if (!isG) return;
        
        if ($(value).attr("id").indexOf("noclick") === 0) {
            isClickable = false;
        }
    });
    
    if (!isClickable) return;
   
    var classList = $(this).get(0).classList;
    var isClicked = $(this).get(0).classList.contains("selected");
    
    if (isClicked) {
        classList.remove("selected");
    } else {
        classList.add("selected");
    }
    
    
});