So I have made this code (when you click on the face it checks a checkbox) :
.mySVG input[type=checkbox]{
display: none;
}
.mySVG label{
cursor: pointer;
}
.mySVG svg{
fill:#F9F7F7;
stroke: #112D4E;
stroke-width: 5;
width:100px;
}
.mySVG input[type="checkbox"]:checked label .Vsvg{
fill: #3F72AF;
}<div >
<input type="checkbox" id="x" name="x">
<label for="x">
<svg viewBox="0 0 290.5 366.2">
<path id="V1svg" d=" M249.3,38.1c-6.5,8.6-14.9,21.8-14.1,25.6c0.2,1.1-10.7,0.1-14.4,0.1c-3.4-0.1-8-0.2-11.3,0.2c-2.8,0.3-9.1,1.2-9.1,1.2l-10.2,2.8 l-11,4.1l-12.7,5.2l-8.6,4.5l-8.6,6.5l-8.2,7.3l-4.5,8.2l-2.8,9l-4.5,19.9l-2.4,8.2l-2,4.5l-0.8,3.6l-0.8,7.3l-0.8,9.4l-0.8,4.9 l-2.4,3.6l-6.9,3.2c0,0-3.3,0.2-4.5,0.8c-0.5,0.2-1,0.7-1.2,1.2c-0.2,0.6,0.1,1.5-0.2,1.9c-0.6,1-1.8,1.5-3.1,2.2 c-1.4,0.7-2.4,1.2-3.6,1.2c-0.7,0-2.1,0.1-2.8,0.1c-1,0-2.3,0-3.2,0c-1.1,0-2.6-0.2-3.6-0.4c-0.9-0.2-1.9-0.8-2.8-0.8 c-1.2,0-1.5-0.4-1.7-0.1c-1.7,1.5-2.7,2.8-2.7,2.8l-3.2,2.8l-5.7,6.9l-8.6,13.5l-3.2,4.5l-7.8,2.8l-7.8,1.6l-4.5,4.5l-3.6,3.6 c0,0-2.1,3.6-3.6,3.6c-1.8,0.2-4.9-3.2-4.9-3.2l-1.6-2.4l-0.4-2l-0.4-3.2c0,0-0.2-1.5,0-2c0.2-1.2,1.6-3.6,1.6-3.6l2-3.2 c0,0,1.2-1,1.8-1.6c0.6-0.5,1.9-1.7,1.9-1.7l1.6-1.6l1.6-1.6c0,0,3.4-6,4.9-8.6c2.7-4.8,9.4-15.9,9.4-15.9l3.2-4.9l1.6-2l2.8-3.6 l0.4-3.6v-3.6v-2.4l-1.3-3.1l-2-4.1l-0.8-4.9v-4.1l3.2-10.2l6.1-14.6c0,0,2.1-5.3,3.1-7.8c1-2.4,3.1-8.2,3.1-8.2l7.3-17.9l6.9-9.8 l6.5-8.2l12.3-7.8l14.3-8.2l23.2-8.6L158,39l28.2-1.6l20.4-0.8l27.3-0.8l9.4,0.3C243.3,36.1,250.5,36.5,249.3,38.1z"/>
<path id="V2svg" d=" M35.1,230.6l6.5-7.1c0,0,2.2-2.4,3.3-3.5c0.4-0.4,1-1.2,1.5-1.3c2-0.5,7.6-1.5,7.6-1.5l8.2-2.8l12.4-19.5l5.3-5.7l5.3-4.9l1-0.6 l5.7,1.6l6.9-0.2h1.9l4.7-2.3c0,0,0.9-0.9,1-1.5c0.2-0.4,0-1.5,0-1.5s0.3-1,0.6-1.3c0.7-0.6,3.1-1,3.1-1s2-0.2,2.7-0.4 c1.9-0.6,4.5-1.5,6.1-3.1c1-1,2.2-2.5,2.6-3.9c0.7-2.2,1.2-7.5,1.2-7.5l1-13.2l1.5-5.1l1.6-3.6l1.6-5.1l1.6-6.3l2-9.4 c0,0,2.6-11.5,4.5-16.1c0.6-1.5,1.8-3.1,2.5-4.5c0.6-1,1.2-2.7,2-3.6c1.2-1.5,5.1-4.3,5.1-4.3l3.6-3.6c0,0,2.7-2.7,2.8-2.3 c0.6,1.5,0,8.4,0,8.4l-0.4,2.8l-0.4,2.3l-0.2,7.1l0.4,9.2l0.8,3.5c0,0,0.5,4.2,0.7,6.1c0.2,1.6,0.9,5.5,0.9,5.5l0.2,6.9l0.4,8.8v9.2 v11l-1.2,11c0,0-0.6,3.4-1,4.4c-0.5,1.1-0.8,4.1-0.8,4.1s-1.5,4.8-2.2,6.8c-1,2.9-4,9.3-4,9.3l-3.2,6.9l-2,4.1l-2,5.5l-2.4,8.8 l-3.6,9c0,0-2.7,4.7-3.8,6.9c-0.6,1-1.6,2.3-2.3,3.2c-0.9,0.9-2,1.9-3.1,2.7c-1,0.7-3.1,1.5-4.3,2c-3.4,1.2-11,2.9-11,2.9l-7.9,1.9 l-8.2,0.8l-5.7,1.2c0,0-1.7,0.3-2.4,0.4c-0.4,0-1-0.2-1.2,0c-0.8,0.7,0.8,2.5,0.4,3.6c-0.2,0.6-1.9-0.6-1.9-0.6l-1.9-0.4l-2.8,0.4 l-6.7,0.4H67l-2.4,0.8l-2,0.6l-2.4,0.6l-3.2-0.2c0,0-2.3,0-3.2,0c-0.8,0-1.9,0-2.7,0c-0.2,0-0.6,0.2-0.8,0c-0.6-0.4-1-1.5-1.2-2.3 c-0.1-0.3,0-1,0-1s-0.2-0.7-0.4-1c-0.2-0.4-1.2-1-1.2-1s-0.8-0.3-1-0.6c-0.2-0.3-0.1-1.4-0.1-1.4s0-1,0.1-1.5 c0.2-0.7,0.7-1.9,0.7-2.3c0.1-0.6,0.8-2.2,0.8-2.4c0.2-1,1.9-8.6,1.5-11.6c-0.1-0.7-0.3-1.5-0.5-2.1c-0.1-0.3-0.1-0.8-0.2-1.1 c-0.1-0.2-0.2-0.4-0.3-0.7c0-0.1-0.3-0.6-0.5-0.8c-0.1-0.2-0.5-0.5-0.6-0.6c-0.2-0.2-0.7-0.7-1-0.7c-3.1,0.1-1.1,0-1.3,0 c-1.3,0.1-1.9-0.1-3.1,0.4c-0.2,0.1-0.3,0.3-0.5,0.4c-0.6,0.2-1.9-0.2-1.9-0.2s-1.6-0.2-2.3-0.5c-0.7-0.3-2.2-1.7-2.2-1.7"/>
<path id="V3svg" d=" M235.1,64.5c-1-1.1-5.2-0.2-5.2-0.2l-6.9-0.2l-8.7-0.4l-6.7,0.4l-7.7,1.1l-10.4,2.7l-13.7,5.4l-8.9,3.7l-5.7,3.1l-3.3,1.7l-2.6,1.9 l-1.7,1.5l-0.9,0.3l0.6,3.1l-0.4,5l-1,6.3v8.3l0.4,6.5l0.9,3.6l0.2,2.7l0.3,2.2l0.4,3l0.9,4.1v5.2l0.4,12.8l0.2,12.1l-0.2,6l-0.6,5 l-0.7,6.1l-1,4.6l-0.9,4.3l-3.7,10.3l-5,11l-3.1,6.1l-2.7,8.7l-1.3,5.2l-2.3,4.8l-2,5l-2.8,4.8l-2.8,4l-3.1,2.7l-6.1,2.2l-10,2.6 l-5.7,1.3l-5.2,0.6l-5.2,0.7c0,0-3.6,1-5.2,1.1c-0.9,0.1-2.4-0.6-3,0.2c-0.7,0.9,1.5,2.9,0.7,3.7c-0.4,0.4-1.7-0.3-1.7-0.3 s-1.1-0.6-1.7-0.7c-0.6-0.1-2.3,0.3-2.3,0.3l-6,0.6h-2.6H67l-6.5,1.9l-5.1-0.1c0,0-1.5-0.2-1.9,0.1c-0.5,0.4-0.8,1.1-1.3,1.5 c-0.2,0.2-0.8,1.2-1,1.5c-0.6,0.6-1.1,2.7-1.1,3.1c-0.2,1.2-0.6,3-0.6,4.3c0,1-0.1,1.9-0.2,2.2c-0.1,0.5,0.1,2.8,0.4,3.1 c0.4,0.4,1.4,0.3,1.9,0.6c0.4,0.2,0.5,0.6,0.9,0.9c0.2,0.1,0.2,0,0.4,0.1c0.5,0.2,0.9,0.8,1.1,1.3c0.5,1,1.4,1.6,2.2,2.4 c0.6,0.7,1.3,1.8,1.7,2.6c0.2,0.5,0.6,1.1,0.7,1.7c0.2,1,0.1,2.3-0.3,3.1c-0.2,0.7-1.1,1.5-1.5,2.2c-0.8,1.4-1.5,3.4-2.3,4.8 c-0.4,0.7-1,1.7-1.3,2.4c-0.2,0.6-0.7,1.4-0.8,2.2c-0.2,1.4,0.2,5.1,0.2,5.1v2.2c0,0,0.1,1.3,0.2,1.8c0.2,0.6,0.6,1.2,0.6,1.8 c0,1-0.2,2.3,0,3.3c0.1,0.5,0.6,1,0.7,1.5c0.2,0.7-0.1,1.7,0.2,2.4c0.2,0.8,0.8,1.9,1.3,2.6c0.4,0.6,1,1.5,1.5,2c1,1,2.7,2,4,2.7 c1,0.6,2.3,1.3,3.4,1.5c1.9,0.5,6.7,0.4,6.7,0.4h5c0,0,5.6,0.3,7.8-0.5c0.9-0.3,2.5-1.6,2.5-1.6s1.1-1.3,1.7-1.7 c0.8-0.6,2-1.3,3-1.5c0.9-0.3,2.2-0.3,3.1-0.4c2.4-0.2,5.7,0.3,8.2-0.2c0.6-0.2,1.5-0.6,2.2-0.9c1.6-0.5,5.4-1,5.4-1l6.3-0.7 l10.4-2.8l6.3-2.4l9.1-4.6l6-2.8l3.7-2.6l4.6-3.4l4.4-4.1l3-3.3l2.7-3.9l2.6-6.1c0,0,1.8-7.5,3-10.7c0.5-1.3,1.9-4.3,1.9-4.3 s1.4-2.3,1.8-3.3c1.1-2.7,2-6.5,3.1-9.2c0.8-2.1,3.1-6.9,3.1-6.9l1.7-3.4l2.3-3.7c0,0,1.6-2.7,2.3-3.9c1-1.5,2.1-3.6,3.1-5.2 c1-1.5,3.6-4.8,3.6-4.8s1.6-2.5,2.4-3.4c1.5-1.6,3.6-3.6,5.2-5c1-0.7,2.3-1.4,3.3-2c1-0.6,2.6-1.4,3.7-1.9c1.7-0.7,5.7-2.3,5.7-2.3 l2.8-2c0,0,1.2-0.6,1.5-1c0.2-0.5-0.2-1.2,0-1.7c0.2-0.3,0.6-0.8,0.9-0.7c0.4,0.1,0.4,0.8,0.6,1.1c0.2,0.4,0.7,0.7,1.2,0.8 c0.8,0.2,0.8-1.3,1-2c0.4-1,0.4-1.9,0.4-2.7c0.1-1.6,0-2.7,0.1-4.5c0-0.5-0.6-1.9-0.6-2.3c0.1-0.9-0.9-3.1-0.9-3.1l-1.1-3 c0,0-0.8-1.9-1.1-2.7c-0.2-0.5-0.7-1.1-0.7-1.7c0-0.4,0.3-1.1,0.7-1.1c0.2,0,0.4,0.4,0.6,0.6c0.5,0.6,1.5,1.9,1.5,1.9l1.7,1 c0,0,1.6-0.1,2.3-0.3c0.6-0.2,1.4-1,2-1.3c0.6-0.2,1.5-0.2,2-0.6c0.3-0.2,0.4-0.8,0.7-1c0.6-0.3,1.6,0,2.3,0.2 c0.5,0.2,1.5,0.7,1.5,0.7s1.5,0.1,2-0.2c0.4-0.2,0.8-0.6,1-1c0.2-0.5-0.1-1.3,0-1.9c0.1-0.5,0.3-1,0.6-1.5c0.2-0.3,0.8-0.4,1-0.7 c0.2-0.3,0-0.8,0-1.1c0-2.3,0.2-7.6,0.2-7.6s-0.3-3.6,0.2-5.2c0.2-0.5,0.4-1.2,0.9-1.5c0.4-0.2,1.2,0.3,1.5,0 c0.6-0.5,0.4-2.6,0.4-2.6s0.2-4.4-0.2-6c-0.2-0.6-1-1.3-1.7-1.5c-0.5-0.2-1.1,0.2-1.5,0.3c-0.5,0-1.1,0-1.5-0.2 c-0.5-0.2-0.9-1-1.5-1c-0.6,0-1.1,0.8-1.7,1c-0.2,0.1-0.6,0.2-0.7,0c-0.4-0.3-0.4-1.2-0.4-1.7c-0.1-1,0.9-3.5,0-3.1 c-0.2,0.1-1,0-1.3-0.3c-0.6-0.6-0.4-2.7-0.4-2.7l-0.6-2.5l-2.4-19.3l-0.2-4.1l-0.2-4.4l-0.5-7.7l0.2-6.9l0.2-7.3l0.9-8.2l1.3-7.7 l0.9-6.9c0,0,0.5-3.7,1-5.2c0.4-1.4,1.5-3,2-4.3c0.4-0.8,0.9-1.3,1.1-2.2C235.2,65.6,235.8,65.3,235.1,64.5z"/>
</svg>
</label>
</div>I would like to be able to make 3 different checkboxes that would check or uncheck when I click on one of the 3 pathes that make the face. Like for exemple
<svg viewBox="0 0 290.5 366.2">
<input type="checkbox" id="x" name="x">
<label for="x">
<path id="V1svg" d="..."/>
</label>
<input type="checkbox" id="y" name="y">
<label for="y">
<path id="V2svg" d="..."/>
</label>
<input type="checkbox" id="z" name="z">
<label for="z">
<path id="V3svg" d=" ... "/>
</label>
</svg>
I haven't figured out how to do this ? Do you know a simple whay to do so ?
CodePudding user response：
Well, I looked around a bit and tried it my self. But as far as I now is there now way to do this, because to select the checkboxes you need to click somewhere in the viewbox of the svg and it can only be a square. So the one on top will always be selected, because its viewbox is over the other ones.
The only way around this is to figure out where the mouse is and put the svg that will be selected on top. I will try it and once I find a working solution I will edit or reply to this post.
CodePudding user response：
You need javascript for this. What you have to do is get the svg paths (by class or id) and add an event listener. Also, you need to get the checkboxes and assign them a value or true or false.
<!-- html starts here -->
<svg>
<path id='path1'>
</svg>
<input id='checkbox1' type='checkbox' />
// javascript starts here
const firstPath = document.querySelector('#path1');
const firstCheckbox = document.querySelector('#checobox1');
firstPath.addEventListener('click', () => {
firstCheckbox.checked = true;
})
And you can make different combos so one path can enable 2 checkboxes, another can enable 3 and so on.