'Multiple checkboxes for multiple paths of one SVG
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 class="mySVG">
<input type="checkbox" id="x" name="x">
<label for="x">
<svg viewBox="0 0 290.5 366.2">
<path id="V1svg" class="Vsvg" 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" class="Vsvg" 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" class="Vsvg" 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" class="Vsvg" d="..."/>
</label>
<input type="checkbox" id="y" name="y">
<label for="y">
<path id="V2svg" class="Vsvg" d="..."/>
</label>
<input type="checkbox" id="z" name="z">
<label for="z">
<path id="V3svg" class="Vsvg" d=" ... "/>
</label>
</svg>
I haven't figured out how to do this ? Do you know a simple whay to do so ?
Solution 1:[1]
As @Michael Mullany pointed out pointer-events: visiblePainted applied on the path elements will do the trick.
You will also need to disable pointer events on labels:
svg {
display: inline-block;
width: 10em;
}
.mySVG {
position: relative;
width: 10em;
}
.mySVG label {
cursor: none;
pointer-events: none;
position: absolute;
top: 0;
}
.Vsvg use {
pointer-events: visiblePainted;
cursor: pointer;
}
.mySVG input[type="checkbox"] {
display: none;
}
.mySVG svg {
fill: #f9f7f7;
stroke: #112d4e;
stroke-width: 5;
width: 100px;
}
.mySVG input[type="checkbox"]:checked+label .Vsvg {
fill: #3f72af;
}<div class="mySVG">
<input type="checkbox" id="x" name="x">
<label for="x">
<svg class="Vsvg" viewBox="0 0 290.5 366.2">
<use href="#V1svg" />
</svg>
</label>
<input type="checkbox" id="y" name="y">
<label for="y">
<svg class="Vsvg" viewBox="0 0 290.5 366.2">
<use href="#V2svg" />
</svg>
</label>
<input type="checkbox" id="z" name="z">
<label for="z">
<svg class="Vsvg" viewBox="0 0 290.5 366.2">
<use href="#V3svg" />
</svg>
</label>
<svg class="svgAsset" viewBox="0 0 290.5 366.2">
<defs>
<path id="V1svg" class="Vsvg" 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" class="Vsvg" 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" class="Vsvg" 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>
</defs>
</div>Solution 2:[2]
Imagine that instead of 3 objects you need to place several hundreds or thousands of objects.
For example, when you want to process a real map of a country or the world.
Creating a thousand checkboxes and a label for them will be very laborious and easy to get confused.
I propose a solution based on SVG + JS and using the <title> tag to display information when hovering over the selected object:
<g>
<title> "UT" - Utah
State capital city - Salt Lake City
Population
City 186,440
Estimate Estimate (2018) 200,591
</title>
<path id="UT" class="Vsvg" d="M726.5,26.1l-83.7-11.9
l20.6-112.5l46.8,8.7l-1.5,10.6l-2.3,13.2l7.8,0.9l16.4,1.8l8.2,0.9L726.5,26.1z"/>
</g>
To display information, hold the cursor on the selected object
document.querySelectorAll('path.state').forEach(path => {
path.addEventListener('mousemove', e => {
if (path.parentNode.parentNode.querySelector('g:last-child') !== path.parentNode)
path.parentNode.parentNode.append(path.parentNode);
});
});.container {
width:50vw;
height:50vh;
}
.Vsvg {
fill:white;
stroke:dodgerblue;
transform-origin: center center;
transform-box: fill-box;
transition: 1s;
}
:hover.Vsvg {
fill:dodgerblue;
stroke:white;
stroke-width:1px;
filter:url(#dropshadow);
-webkit-transform: scale(1.05);
transform: scale(1.0.5);
} <div class="container">
<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290.5 366.2">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g>
<title> CA" - California
State capital city - Sacramento
Population
City 466,488
Estimate (2018) 508,529
</title>
<path id="V1svg" class="Vsvg" 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"/>
</g>
<g>
<title> "NV" - Nevada
State capital city - Carson City
Population
City 55,274
Estimate Estimate (2018) 55,414
</title>
<path id="V2svg" class="Vsvg" 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"/>
</g>
<g>
<title> "UT" - Utah
State capital city - Salt Lake City
Population
City 186,440
Estimate Estimate (2018) 200,591
</title>
<path id="V3svg" class="Vsvg" 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"/>
</g>
</svg>
</div> One more example
document.querySelectorAll('path.Vsvg').forEach(path => {
path.addEventListener('mouseover', e => {
path.parentNode.parentNode.append(path.parentNode);
});
});.Vsvg {
fill:white;
stroke:dodgerblue;
transform-origin: center center;
transform-box: fill-box;
transition: 1s;
}
:hover.Vsvg {
fill:dodgerblue;
stroke:white;
stroke-width:2px;
filter:url(#dropshadow);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}<body>
<section id="map">
<svg version="1.1"
id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="467 -284 959 593" xml:space="preserve">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g>
<title>"ID" - IDAHO
State capital city - Boise
Population - 228,790
</title>
<path id="ID" class="Vsvg" d="
M615.5-107.5l8.8-35.2l1.4-4.2l2.5-5.9l-1.3-2.3l-2.5,0.1l-0.8-1l0.5-1.1l0.3-3.1l4.5-5.5l1.8-0.5l1.1-1.1l0.6-3.2l0.9-0.7l3.9-5.8
l3.9-4.3l0.2-3.8l-3.4-2.6l-1.5-4.4l13.6-63.3l13.5,2.5l-4.4,21.4l3.6,7.5l-1.6,4.7l2,4.6l3.1,1.3l3.8,9.6l3.5,4.4l0.5,1.1l3.3,1.1
l0.4,2.1l-7,17.4l-0.2,2.6l2.6,3.3l0.9,0l4.9-3l0.7-1.1l1.6,0.7l-0.3,5.4l2.7,12.6l3.9,3.2l1.7,2.2l-0.7,4.1l1.1,2.8l1.1,1.1
l2.5-2.4l2.8,0l2.9,1.3l2.8-0.7l3.8-0.2l4,1.6l2.7-0.3l0.5-3l2.9-0.8l1.3,1.5l0.4,2.9l1.4,1.2l-8.4,53.6
C710.4-89.3,622.5-106,615.5-107.5z"/>
</g>
<g>
<title> "UT" - Utah
State capital city - Salt Lake City
Population
City 186,440
Estimate Estimate (2018) 200,591
</title>
<path id="UT" class="Vsvg" d="M726.5,26.1l-83.7-11.9
l20.6-112.5l46.8,8.7l-1.5,10.6l-2.3,13.2l7.8,0.9l16.4,1.8l8.2,0.9L726.5,26.1z"/>
</g>
<g>
<title> "AZ" - Arizona
State capital city - Phoenix
Population
City 1,445,632
Estimate Estimate (2018) 1,660,272
</title>
<path id="AZ" class="Vsvg" d="
M611.9,98.6l-2.6,2.2l-0.3,1.5l0.5,1l18.9,10.7l12.1,7.6l14.7,8.6l16.8,10l12.3,2.4l25,2.7l17.3-119.1l-83.7-11.9l-3.1,16.4l-1.6,0
l-1.7,2.6l-2.5-0.1l-1.3-2.7l-2.7-0.3l-0.9-1.1H628l-0.9,0.6l-1.9,1l-0.1,7l-0.2,1.7l-0.6,12.6l-1.5,2.2l-0.6,3.3l2.7,4.9l1.3,5.8
l0.8,1l1,0.6l-0.1,2.3l-1.6,1.4l-3.4,1.7l-1.9,1.9l-1.5,3.7l-0.6,4.9l-2.9,2.7l-2.1,0.7l0.1,0.8l-0.5,1.7l0.5,0.8l3.7,0.6l-0.6,2.7
l-1.5,2.2L611.9,98.6z"/>
</g>
<g>
<title> "NV" - Nevada
State capital city - Carson City
Population
City 55,274
Estimate Estimate (2018) 55,414
</title>
<path id="NV" class="Vsvg" d="M663.4-98.4
L639.8,30.4l-1.8,0.3l-1.6,2.4l-2.4,0l-1.5-2.7l-2.6-0.4l-0.8-1.1l-1-0.1l-2.8,1.6l-0.3,6.8l-0.4,5.8l-0.3,8.6l-1.4,2.1l-2.4-1.1
L551.3-51.5l19-67.6L663.4-98.4z"/>
</g>
<g>
<title> "OR" - Oregon
State capital city - Salem
Population
City 154,637
Estimate Estimate (2018) 173,442
</title>
<path id="OR" class="Vsvg" d="
M615.7-108.5l8.9-34.8l1.1-4.2l2.4-5.6l-0.6-1.2l-2.5,0l-1.3-1.7l0.5-1.5l0.5-3.2l4.5-5.5l1.8-1.1l1.1-1.1l1.5-3.6l4-5.7l3.6-3.9
l0.2-3.5l-3.3-2.5l-1.8-4.6l-12.7-3.6l-15.1-3.5l-15.4,0.1l-0.5-1.4l-5.5,2.1l-4.5-0.6l-2.4-1.6l-1.3,0.7l-4.7-0.2l-1.7-1.4
l-5.3-2.1l-0.8,0.1l-4.3-1.5l-1.9,1.8l-6.2-0.3l-5.9-4.1l0.7-0.8l0.2-7.8l-2.3-3.9l-4.1-0.6l-0.7-2.5l-2.4-0.5l-5.8,2.1l-2.3,6.5
l-3.2,10l-3.2,6.5l-5,14.1l-6.5,13.6l-8.1,12.6l-1.9,2.9l-0.8,8.6l0.4,12.1L615.7-108.5z"/>
</g>
<g>
<title> "WA" - Washington Territory
State capital city - Olympia
Population
City 46,478
Estimate (2018) 52,555
</title>
<path id="WA" class="Vsvg" d="
M569.1-276.4l4.4,1.5l9.7,2.7l8.6,1.9l20,5.7l23,5.7l15.2,3.2l-13.6,63.6l-12.4-3.5l-15.5-3.6l-15.2,0l-0.5-1.3l-5.6,2.2l-4.6-0.7
l-2.1-1.6L579-200l-4.7-0.1l-1.7-1.3l-5.3-2.1l-0.7,0.1l-4.4-1.5l-1.9,1.8l-6.3-0.3l-5.9-4.1l0.8-0.9l0.1-7.7l-2.3-3.8l-4.1-0.6
l-0.7-2.5l-2.3-0.5l-3.6,1.2l-2.3-3.2l0.3-2.9l2.7-0.3l1.6-4l-2.6-1.1l0.2-3.7l4.4-0.6l-2.7-2.7l-1.5-7.1l0.6-2.9v-7.9l-1.8-3.2
l2.3-9.4l2.1,0.5l2.4,2.9l2.7,2.6l3.2,1.9l4.5,2.1l3.1,0.6l2.9,1.5l3.4,1l2.3-0.2v-2.4l1.3-1.1l2.1-1.3l0.3,1.1l0.3,1.8l-2.3,0.5
l-0.3,2.1l1.8,1.5l1.1,2.4l0.6,1.9l1.5-0.2l0.2-1.3l-1-1.3l-0.5-3.2l0.8-1.8l-0.6-1.5v-2.3l1.8-3.6l-1.1-2.6l-2.4-4.9l0.3-0.8
L569.1-276.4z M559.6-270.4l2-0.2l0.5,1.4l1.5-1.6h2.3l0.8,1.5l-1.5,1.7l0.6,0.8l-0.7,2l-1.4,0.4c0,0-0.9,0.1-0.9-0.2
s1.5-2.6,1.5-2.6l-1.7-0.6l-0.3,1.5l-0.7,0.6l-1.5-2.3L559.6-270.4z"/>
</g>
<g>
<title> "CA" - California
State capital city - Sacramento
Population
City 466,488
Estimate (2018) 508,529
</title>
<path id="CA" class="Vsvg" d="
M611.7,98.2l3.9-0.5l1.5-2l0.5-2.9l-3.6-0.6l-0.5-0.7l0.5-2l-0.2-0.6l1.9-0.6l3-2.8l0.6-5l1.4-3.4l1.9-2.2l3.5-1.6l1.7-1.6l0.1-2.1
l-1-0.6l-1-1.1l-1.2-5.8l-2.7-4.8l0.6-3.5l-2.4-1L551.3-51.5l18.9-67.6l-67.1-15.7l-1.5,4.7l-0.2,7.4l-5.2,11.8l-3.1,2.6l-0.3,1.1
l-1.8,0.8l-1.5,4.2l-0.8,3.2l2.7,4.2l1.6,4.2l1.1,3.6l-0.3,6.5l-1.8,3.1l-0.6,5.8l-1,3.7l1.8,3.9l2.7,4.5l2.3,4.9l1.3,4l-0.3,3.2
l-0.3,0.5v2.1l5.7,6.3l-0.5,2.4l-0.6,2.3l-0.6,1.9l0.2,8.2l2.1,3.7l1.9,2.6l2.7,0.5l1,2.7l-1.1,3.6l-2.1,1.6h-1.1l-0.8,3.9l0.5,2.9
l3.2,4.4l1.6,5.3l1.5,4.7l1.3,3.1l3.4,5.8l1.5,2.6l0.5,2.9l1.6,1v2.4l-0.8,1.9l-1.8,7.1l-0.5,1.9l2.4,2.7l4.2,0.5l4.5,1.8l3.9,2.1
h2.9l2.9,3.1l2.6,4.9l1.1,2.3l3.9,2.1l4.8,0.8l1.5,2.1l0.6,3.2l-1.5,0.6l0.3,1l3.2,0.8l2.7,0.2l3.2-1.7l3.9,4.2l0.8,2.3l2.6,4.2
l0.3,3.2v9.4l0.5,1.8l10,1.5l19.7,2.7L611.7,98.2z M523.6,54.5l1.3,1.5l-0.2,1.3l-3.2-0.1l-0.6-1.2l-0.6-1.5L523.6,54.5z
M525.5,54.5l1.2-0.6l3.6,2.1l3.1,1.2l-0.9,0.6l-4.5-0.2l-1.6-1.6L525.5,54.5z M546.2,74.3l1.8,2.3l0.8,1l1.5,0.6l0.6-1.5l-1-1.8
l-2.7-2l-1.1,0.2V74.3z M544.7,82.9l1.8,3.2l1.2,1.9l-1.5,0.2l-1.3-1.2c0,0-0.7-1.5-0.7-1.9s0-2.2,0-2.2L544.7,82.9z"/>
</g>
</svg>
</section>
</body>Solution 3:[3]
Quick example with JS without the extra elements in the svg etc and a little more flexible, left the checkboxes showing for example sake only, would need tweaking to make the events go both ways.
const svg = document.getElementById('the-svg'),
paths = svg.querySelectorAll('path');
handleChecked = (elem) => {
elem.addEventListener('click', function(e) {
const thePiece = document.getElementById(`${e.srcElement.id}-checkbox`);
thePiece ? thePiece.checked = !thePiece.checked : console.error(thePiece);
elem.style.fill = thePiece.checked ? '#3F72AF' : '#ffffff';
});
};
window.addEventListener('load', function(e) {
if (paths.length) {
for (i = 0, x = paths.length; i < x; ++i) {
handleChecked(paths[i]);
}
}
});.mySVG input[type=checkbox]{
/*display: none;*/
}
.mySVG label{
cursor: pointer;
}
.mySVG svg{
fill:#F9F7F7;
stroke: #112D4E;
stroke-width: 5;
width:100px;
}<div class="mySVG">
<input type="checkbox" id="V1svg-checkbox" name="x">
<input type="checkbox" id="V2svg-checkbox" name="x">
<input type="checkbox" id="V3svg-checkbox" name="x">
<label for="x">
<svg viewBox="0 0 290.5 366.2" id="the-svg">
<path id="V1svg" class="Vsvg" 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" class="Vsvg" 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" class="Vsvg" 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>Solution 4:[4]
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.
Solution 5:[5]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | herrstrietzel |
| Solution 2 | Alexandr_TT |
| Solution 3 | Chris W. |
| Solution 4 | CodeFoxDev |
| Solution 5 | JohnTwo23 |