SVG Hotspot Example

This example illustrates how to create responsive SVG hotspots over an image

by jamesbrndwgn

HTML

<svg viewBox="0 0 2048 1152">
  <image width="2048" height="1152" xlink:href="https://thepracticaldev.s3.amazonaws.com/i/w5l569wg06kb2ct3kudp.jpg"/>
  <path id="Colonel" d="M494.88,1152.73l-317.44.06S173,1134,181,1122c1.53-2.29-5.43-3.65-5.34-6.67,0.49-17.35,2.91-38.55,10-58.67,0.5-1.41,10.56-13.87,9.33-14C179.33,1041,181.88,932,181.88,932l29.63-4.44L111,635.8S51,600.06,50,583.86s38.52-50.37,38.52-50.37l60.75-23.71L201,452l17-16.67L240.66,428l18.26-19,29.63-47.41-69.63-96.3,20.74-63,45.67-43.67,81.75-37.06s1.59,2.38,3.25,5.39c20.33,37,12.11,53.75,17,56C443,208.67,446,224.33,446,224.33c5.67-9,36.09-28,64.8-18.27L533,323.1l-44.07,48-44.78,21.73,14.49,50-60.58,48.07L401.37,508l20.41,8.56,59.93-48.07L484.34,508l9.22,144.87-25.68,25-18.44,40.83,5.93,44.78,17.78,15.15,103.39,19.1,5.27,22.39-79,17.78-6.59,9.22L433,861.67l-6.59,11.19L430,888.59l51-11.12Z" fill="transparent"/>
  <g>
    <path id="Kickass" d="M1659.46,392.15l-27.66-9.88-70.13,42.47L1532,398.07l-40.5-5.93L1453,374.37l18.77-7.9-3-38.52-62.23-3-58.28-35.56-30.62-2-31.61-9.88-24.69-4-17.78,5.93,46.43-84,23.71-71.12,5.93-40.5-3.33-53.11a28,28,0,0,0-8.49-18.4l-9-9.71C1297,1,1293.56,0,1291,0H1112.23l-16.57,67.67-1,50.05L1087.54,165l-17.78,35.56L1064.82,242l-23.71,34.57-47.41,40.5L971,364.49l-67.17,5.93,14.82,43.46,38.52-4-4.83,43.74,2,38,56.67,116L1052.33,683l11.33,21.67,220-35.67,105.67-11,34.06-2.12L1451,635.14,1456,614.4l27.66-31.61,13.83-40.5,91.86-4.94,13.83-28.65-4-28.65,55.78-26,17.31-32.32Z" fill="transparent"/>
    <path id="Kickass-bottom" d="M1470.16,801.66l-31.49-90-177.33,31.67L1120.66,776l-28-8.67,23,39.33-4.07,22.08L1085.66,1152h530s-71-206-130-289Z" fill="transparent"/>
  </g>
  <path id="Hitgirl"...

CSS

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}

svg {
  width: 100%;
}

svg path,
svg g {
  cursor: pointer;
}

svg path:hover,
svg g:hover path{
  fill: rgba(0,0,0,0.5);
}

JavaScript

const paths = document.querySelectorAll('path');

paths.forEach(el => {
  el.addEventListener('click', (e) => {
    alert(e.target.id)
  })
})