Responsive image map with svg, single and multi hovering

by jmeile

HTML

<div id="svg-container">
   <!-- ViewBox has the dimensions of the image
        preserveAspectRatio will make the image map responsive
   -->
   <svg viewBox="0 0 640 480"
        preserveAspectRatio="xMinYMin meet">
     <image xlink:href="https://www.icvr.ethz.ch/people/staff/icvr_team_2016_05_31.jpg" />
     <a xlink:href="https://www.icvr.ethz.ch/people/staff/Kunz_Andre_119367856395052/index" target="_blank">
       <polygon...

CSS

/* Note: Never set a mouse pointer on the svg shapes;
 * otherwise the links won't work
 */

#svg-container {
  /* This is the widht of the image in pixels */
  max-width: 640px;
  margin: 0;
}

#svg-container svg * {
  fill: #fff;
  fill-opacity: 0;
}

#svg-container svg *:hover {
  fill: #52ade7;
  fill-opacity: 0.5;
}

#roh:hover polygon,
#zank:hover polygon {
  fill: #52ade7;
  fill-opacity: 0.5;
}