Search code examples
csssvg

Using sections of an svg as checkboxes/radios

I have an svg for a project.

SVG Code:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.89 288.95">
  <path
    class="crystal-outline"
  d="M6,231.49c-.42-10.39-.8-20.78-1.27-31.17-.38-8.5-.89-17-1.32-25.49-.46-9.16-.87-18.32-1.35-27.48Q1.49,135.77.77,124.2c-.18-2.86-.32-5.73-.71-8.57-.33-2.44.68-3.93,2.57-5.29q18-13,35.92-26.16c12.36-9.12,24.62-18.38,37-27.53Q105.72,34.25,136,11.93c4.63-3.43,9.26-6.84,13.85-10.31,2.55-1.93,5.19-2,8.1-.94q51.13,18.41,102.29,36.75,7.61,2.73,15.2,5.41a4.62,4.62,0,0,1,3.43,4.67c.16,7.32.36,14.63.66,21.94.38,9.06.87,18.11,1.33,27.17.43,8.5.9,17,1.33,25.49.46,9.17.86,18.34,1.35,27.5.39,7.06.86,14.11,1.33,21.16.31,4.61-1.58,7.82-5.34,10.58q-58.89,43.44-117.63,87.08c-8.48,6.28-17,12.47-25.44,18.84a6.85,6.85,0,0,1-7.28,1.1c-23-8.35-46.06-16.54-69.1-24.78-15.24-5.45-30.48-10.94-45.75-16.33-7.24-2.56-8-3.42-8.19-11.1,0-1.55,0-3.11,0-4.67Zm218.12-88.23c-1-17.67-2-34.78-2.92-51.89-.14-2.6-1.5-3.67-3.66-4.47C200.8,80.67,184,74.46,167.29,68.09a6.64,6.64,0,0,0-7,1q-48.65,36-97.32,72A5.53,5.53,0,0,0,61,144.82c-.1,3.08.39,6.16.54,9.25.71,14.28,1.64,28.56,1.93,42.85.08,4.06,1.64,5.61,5,6.83q24.69,9.09,49.27,18.44a7.6,7.6,0,0,0,8-1.22q47-34.75,94-69.38C222.89,149.26,225.67,147.16,224.16,143.26ZM153.1,5.34,4.58,115.15C22,123.5,39,131.54,55.88,139.8c2.39,1.17,3.9.95,5.89-.54q19.91-14.91,39.95-29.65c19.49-14.38,39-28.7,58.48-43.15a5,5,0,0,0,1.58-3.81c-.24-3.93-.84-7.85-1.44-11.76-1.45-9.42-3-18.82-4.49-28.24C155,17.07,154.08,11.47,153.1,5.34ZM279.57,175.53c-17.48-8.36-34.45-16.46-51.38-24.63a4.08,4.08,0,0,0-4.84.63c-7.27,5.5-14.64,10.89-22,16.31Q164,195.46,126.48,223c-2.38,1.74-3.35,3.54-2.84,6.38.62,3.36,1,6.75,1.56,10.13q2.56,16.48,5.16,33c.62,3.86,1.31,7.71,2.06,12.08ZM272.34,47.84l-117-42.19c2.71,18.11,5.19,35.48,8,52.8.42,2.58-.52,6,3.49,7.5Q192.62,75.26,218.23,85a4.27,4.27,0,0,0,4.79-.77c4.84-3.72,9.81-7.27,14.72-10.89C249.09,65,260.44,56.63,272.34,47.84ZM11.41,240.76c16.8-12.39,33-24.3,49.09-36.28A3.88,3.88,0,0,0,62,201.74c-.22-5.06-.79-10.11-1.06-15.17-.72-13.48-1.42-27-2-40.45-.08-2-.57-3.1-2.49-4-10.72-5-21.38-10.13-32-15.24-6.44-3.07-12.87-6.18-19.86-9.54.36,2.26.74,3.85.84,5.46.49,8.49.91,17,1.36,25.49q.66,12.42,1.33,24.83c.67,12.69,1.37,25.37,2,38.06C10.58,220.8,11,230.41,11.41,240.76Zm269-68.08c-2.14-41.25-4.23-81.79-6.36-122.94l-7,5.17Q246.43,70,225.92,85.22c-1.11.83-2.37,2.4-2.35,3.61.09,5.07.73,10.13,1,15.21.72,13.38,1.44,26.76,1.95,40.16a4.15,4.15,0,0,0,2.79,4.22c13.06,6.19,26.08,12.48,39.12,18.72C272.22,169,276.05,170.67,280.38,172.68Zm-151.52,111a13.54,13.54,0,0,0,.1-2.25c-2.54-17.06-5.21-34.1-7.59-51.18-.44-3.16-1.8-4.53-4.64-5.57C100.11,218.53,83.55,212.27,67,206a4.72,4.72,0,0,0-5.17.61c-10.74,8.07-21.61,16-32.43,24-5.14,3.8-10.27,7.63-15.64,11.62Z" />
    <path class="crystal-1"
    d="M224.16,143.26c1.51,3.9-1.27,6-4.43,8.33q-47.08,34.59-94,69.38a7.6,7.6,0,0,1-8,1.22q-24.57-9.37-49.27-18.44c-3.33-1.22-4.89-2.77-5-6.83-.29-14.29-1.22-28.57-1.93-42.85-.15-3.09-.64-6.17-.54-9.25A5.53,5.53,0,0,1,63,141.06q48.62-36,97.32-72a6.64,6.64,0,0,1,7-1C184,74.46,200.8,80.67,217.58,86.9c2.16.8,3.52,1.87,3.66,4.47C222.13,108.48,223.15,125.59,224.16,143.26Z" />
    <path class="crystal-2"
    d="M153.1,5.34c1,6.13,1.86,11.73,2.75,17.31,1.5,9.42,3,18.82,4.49,28.24.6,3.91,1.2,7.83,1.44,11.76a5,5,0,0,1-1.58,3.81c-19.44,14.45-39,28.77-58.48,43.15q-20,14.76-39.95,29.65c-2,1.49-3.5,1.71-5.89.54C39,131.54,22,123.5,4.58,115.15Z" />
    <path class="crystal-3"
    d="M279.57,175.53l-147.15,109c-.75-4.37-1.44-8.22-2.06-12.08q-2.61-16.49-5.16-33c-.53-3.38-.94-6.77-1.56-10.13-.51-2.84.46-4.64,2.84-6.38q37.53-27.48,74.9-55.18c7.33-5.42,14.7-10.81,22-16.31a4.08,4.08,0,0,1,4.84-.63C245.12,159.07,262.09,167.17,279.57,175.53Z" />
    <path class="crystal-4"
    d="M272.34,47.84c-11.9,8.79-23.25,17.15-34.6,25.52C232.83,77,227.86,80.53,223,84.25a4.27,4.27,0,0,1-4.79.77Q192.59,75.32,166.85,66c-4-1.45-3.07-4.92-3.49-7.5-2.82-17.32-5.3-34.69-8-52.8Z" />
    <path class="crystal-5"
    d="M11.41,240.76c-.45-10.35-.83-20-1.3-29.57-.63-12.69-1.33-25.37-2-38.06q-.66-12.42-1.33-24.83c-.45-8.5-.87-17-1.36-25.49-.1-1.61-.48-3.2-.84-5.46,7,3.36,13.42,6.47,19.86,9.54,10.67,5.11,21.33,10.25,32.05,15.24,1.92.89,2.41,2,2.49,4,.55,13.49,1.25,27,2,40.45.27,5.06.84,10.11,1.06,15.17a3.88,3.88,0,0,1-1.51,2.74C44.38,216.46,28.21,228.37,11.41,240.76Z" />
    <path class="crystal-6"
    d="M280.38,172.68c-4.33-2-8.16-3.73-11.94-5.54-13-6.24-26.06-12.53-39.12-18.72a4.15,4.15,0,0,1-2.79-4.22c-.51-13.4-1.23-26.78-1.95-40.16-.28-5.08-.92-10.14-1-15.21,0-1.21,1.24-2.78,2.35-3.61Q246.38,70,267,54.91l7-5.17C276.15,90.89,278.24,131.43,280.38,172.68Z" />
    <path class="crystal-7"
    d="M128.86,283.63,13.76,242.17c5.37-4,10.5-7.82,15.64-11.62,10.82-8,21.69-15.88,32.43-24A4.72,4.72,0,0,1,67,206c16.55,6.28,33.11,12.54,49.73,18.64,2.84,1,4.2,2.41,4.64,5.57,2.38,17.08,5,34.12,7.59,51.18A13.54,13.54,0,0,1,128.86,283.63Z" />
</svg>

Svg Image:

Crystal that the svg code above represents

I want to make it so that when the user clicks on each facet of the crystal (paths crystal-1 - .crystal-6), a corresponding checkbox is checked. With CSS I'll then change the fill color of that section as visual feedback to the user, but I'm pretty sure I know how to do that.

Solution

  • Luckily, each <path> can be seen as a separate HTML element. So you can target it with CSS or JS.

    document.querySelectorAll("svg path:not(.crystal-outline)").forEach(function(path) {
  path.addEventListener('click', function(ev) {
    var cls = this.classList[0]
    // console.log("select checkbox with class " + cls);
    var checkboxCls = "checkbox-" + cls
    document.querySelector("." + checkboxCls).checked = !document.querySelector("." + checkboxCls).checked

  })
})

var checkboxContainer = document.querySelector(".checkbox-container");
for (var i = 1; i <= 7; i++) {
  var checkbox = document.createElement("input")
  checkbox.type = "checkbox"
  checkbox.className = "checkbox-crystal-" + i
  checkboxContainer.append(checkbox)
}
    body {
  background: white;
}

svg {
  width: 100%;
}

.crystal-outline {
  fill: white;
}

path:not(.crystal-outline) {
  cursor: pointer;
}

path:not(.crystal-outline):hover {
  fill: red;
}
    <div class="checkbox-container">
</div>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000 ">/
  <path
    class="crystal-outline"
  d="M6,231.49c-.42-10.39-.8-20.78-1.27-31.17-.38-8.5-.89-17-1.32-25.49-.46-9.16-.87-18.32-1.35-27.48Q1.49,135.77.77,124.2c-.18-2.86-.32-5.73-.71-8.57-.33-2.44.68-3.93,2.57-5.29q18-13,35.92-26.16c12.36-9.12,24.62-18.38,37-27.53Q105.72,34.25,136,11.93c4.63-3.43,9.26-6.84,13.85-10.31,2.55-1.93,5.19-2,8.1-.94q51.13,18.41,102.29,36.75,7.61,2.73,15.2,5.41a4.62,4.62,0,0,1,3.43,4.67c.16,7.32.36,14.63.66,21.94.38,9.06.87,18.11,1.33,27.17.43,8.5.9,17,1.33,25.49.46,9.17.86,18.34,1.35,27.5.39,7.06.86,14.11,1.33,21.16.31,4.61-1.58,7.82-5.34,10.58q-58.89,43.44-117.63,87.08c-8.48,6.28-17,12.47-25.44,18.84a6.85,6.85,0,0,1-7.28,1.1c-23-8.35-46.06-16.54-69.1-24.78-15.24-5.45-30.48-10.94-45.75-16.33-7.24-2.56-8-3.42-8.19-11.1,0-1.55,0-3.11,0-4.67Zm218.12-88.23c-1-17.67-2-34.78-2.92-51.89-.14-2.6-1.5-3.67-3.66-4.47C200.8,80.67,184,74.46,167.29,68.09a6.64,6.64,0,0,0-7,1q-48.65,36-97.32,72A5.53,5.53,0,0,0,61,144.82c-.1,3.08.39,6.16.54,9.25.71,14.28,1.64,28.56,1.93,42.85.08,4.06,1.64,5.61,5,6.83q24.69,9.09,49.27,18.44a7.6,7.6,0,0,0,8-1.22q47-34.75,94-69.38C222.89,149.26,225.67,147.16,224.16,143.26ZM153.1,5.34,4.58,115.15C22,123.5,39,131.54,55.88,139.8c2.39,1.17,3.9.95,5.89-.54q19.91-14.91,39.95-29.65c19.49-14.38,39-28.7,58.48-43.15a5,5,0,0,0,1.58-3.81c-.24-3.93-.84-7.85-1.44-11.76-1.45-9.42-3-18.82-4.49-28.24C155,17.07,154.08,11.47,153.1,5.34ZM279.57,175.53c-17.48-8.36-34.45-16.46-51.38-24.63a4.08,4.08,0,0,0-4.84.63c-7.27,5.5-14.64,10.89-22,16.31Q164,195.46,126.48,223c-2.38,1.74-3.35,3.54-2.84,6.38.62,3.36,1,6.75,1.56,10.13q2.56,16.48,5.16,33c.62,3.86,1.31,7.71,2.06,12.08ZM272.34,47.84l-117-42.19c2.71,18.11,5.19,35.48,8,52.8.42,2.58-.52,6,3.49,7.5Q192.62,75.26,218.23,85a4.27,4.27,0,0,0,4.79-.77c4.84-3.72,9.81-7.27,14.72-10.89C249.09,65,260.44,56.63,272.34,47.84ZM11.41,240.76c16.8-12.39,33-24.3,49.09-36.28A3.88,3.88,0,0,0,62,201.74c-.22-5.06-.79-10.11-1.06-15.17-.72-13.48-1.42-27-2-40.45-.08-2-.57-3.1-2.49-4-10.72-5-21.38-10.13-32-15.24-6.44-3.07-12.87-6.18-19.86-9.54.36,2.26.74,3.85.84,5.46.49,8.49.91,17,1.36,25.49q.66,12.42,1.33,24.83c.67,12.69,1.37,25.37,2,38.06C10.58,220.8,11,230.41,11.41,240.76Zm269-68.08c-2.14-41.25-4.23-81.79-6.36-122.94l-7,5.17Q246.43,70,225.92,85.22c-1.11.83-2.37,2.4-2.35,3.61.09,5.07.73,10.13,1,15.21.72,13.38,1.44,26.76,1.95,40.16a4.15,4.15,0,0,0,2.79,4.22c13.06,6.19,26.08,12.48,39.12,18.72C272.22,169,276.05,170.67,280.38,172.68Zm-151.52,111a13.54,13.54,0,0,0,.1-2.25c-2.54-17.06-5.21-34.1-7.59-51.18-.44-3.16-1.8-4.53-4.64-5.57C100.11,218.53,83.55,212.27,67,206a4.72,4.72,0,0,0-5.17.61c-10.74,8.07-21.61,16-32.43,24-5.14,3.8-10.27,7.63-15.64,11.62Z" />
    <path class="crystal-1"
    d="M224.16,143.26c1.51,3.9-1.27,6-4.43,8.33q-47.08,34.59-94,69.38a7.6,7.6,0,0,1-8,1.22q-24.57-9.37-49.27-18.44c-3.33-1.22-4.89-2.77-5-6.83-.29-14.29-1.22-28.57-1.93-42.85-.15-3.09-.64-6.17-.54-9.25A5.53,5.53,0,0,1,63,141.06q48.62-36,97.32-72a6.64,6.64,0,0,1,7-1C184,74.46,200.8,80.67,217.58,86.9c2.16.8,3.52,1.87,3.66,4.47C222.13,108.48,223.15,125.59,224.16,143.26Z" />
    <path class="crystal-2"
    d="M153.1,5.34c1,6.13,1.86,11.73,2.75,17.31,1.5,9.42,3,18.82,4.49,28.24.6,3.91,1.2,7.83,1.44,11.76a5,5,0,0,1-1.58,3.81c-19.44,14.45-39,28.77-58.48,43.15q-20,14.76-39.95,29.65c-2,1.49-3.5,1.71-5.89.54C39,131.54,22,123.5,4.58,115.15Z" />
    <path class="crystal-3"
    d="M279.57,175.53l-147.15,109c-.75-4.37-1.44-8.22-2.06-12.08q-2.61-16.49-5.16-33c-.53-3.38-.94-6.77-1.56-10.13-.51-2.84.46-4.64,2.84-6.38q37.53-27.48,74.9-55.18c7.33-5.42,14.7-10.81,22-16.31a4.08,4.08,0,0,1,4.84-.63C245.12,159.07,262.09,167.17,279.57,175.53Z" />
    <path class="crystal-4"
    d="M272.34,47.84c-11.9,8.79-23.25,17.15-34.6,25.52C232.83,77,227.86,80.53,223,84.25a4.27,4.27,0,0,1-4.79.77Q192.59,75.32,166.85,66c-4-1.45-3.07-4.92-3.49-7.5-2.82-17.32-5.3-34.69-8-52.8Z" />
    <path class="crystal-5"
    d="M11.41,240.76c-.45-10.35-.83-20-1.3-29.57-.63-12.69-1.33-25.37-2-38.06q-.66-12.42-1.33-24.83c-.45-8.5-.87-17-1.36-25.49-.1-1.61-.48-3.2-.84-5.46,7,3.36,13.42,6.47,19.86,9.54,10.67,5.11,21.33,10.25,32.05,15.24,1.92.89,2.41,2,2.49,4,.55,13.49,1.25,27,2,40.45.27,5.06.84,10.11,1.06,15.17a3.88,3.88,0,0,1-1.51,2.74C44.38,216.46,28.21,228.37,11.41,240.76Z" />
    <path class="crystal-6"
    d="M280.38,172.68c-4.33-2-8.16-3.73-11.94-5.54-13-6.24-26.06-12.53-39.12-18.72a4.15,4.15,0,0,1-2.79-4.22c-.51-13.4-1.23-26.78-1.95-40.16-.28-5.08-.92-10.14-1-15.21,0-1.21,1.24-2.78,2.35-3.61Q246.38,70,267,54.91l7-5.17C276.15,90.89,278.24,131.43,280.38,172.68Z" />
    <path class="crystal-7"
    d="M128.86,283.63,13.76,242.17c5.37-4,10.5-7.82,15.64-11.62,10.82-8,21.69-15.88,32.43-24A4.72,4.72,0,0,1,67,206c16.55,6.28,33.11,12.54,49.73,18.64,2.84,1,4.2,2.41,4.64,5.57,2.38,17.08,5,34.12,7.59,51.18A13.54,13.54,0,0,1,128.86,283.63Z" />
</svg>