Responsive svg image map

forked from anonymous's block: fresh block

forked from anonymous's block: Response svg image map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100vw }
    polygon { stroke: magenta; stroke-width:5px; }
  </style>
</head>

<body>
	<svg>
    <image xlink:href="https://s-media-cache-ak0.pinimg.com/originals/16/64/39/166439a1a74d4f0d389bdaf85fba5dba.jpg"/>
    <polygon fill="transparent" id="fire" points="238,78,176,121,158,147,153,173,146,148,120,208,107,248,111,277,103,283,102,289,113,296,147,329,138,337,129,335,129,345,140,350,160,334,211,334,222,338,220,347,234,340,225,326,246,300,256,266,244,218,232,186,252,139,273,110,243,124,226,134,207,153,203,132,221,108,235,99"/>
    <polygon fill="transparent" id="water"  points="469,88,473,151,495,199,506,249,502,299,487,320,471,332,487,337,480,353,471,341,447,340,409,335,388,345,378,345,373,333,375,324,390,332,399,326,374,301,369,293,356,293,356,282,369,280,376,215,418,150" />
  </svg>  
  <script>
    
    function calculateScalingFactor(svg) {
      // reset the image to its original size
      svg.select("image").attr("width", null);
      
      // calculate image size and svg size
      let imageBBox = svg.select("image").node().getBoundingClientRect();
      let svgBBox = svg.node().getBoundingClientRect();

// calculate scaling factor
      let scalingFactor = svgBBox.width / imageBBox.width;
      
      return scalingFactor;
    }
    
    function draw() {
      let svg = d3.select("svg");

let scalingFactor = calculateScalingFactor(svg);

// make image fit svg width
      svg.select("image").attr("width", "100%");

// make svg fit image height
      imageBBox = svg.select("image").node().getBoundingClientRect();
      svg.attr("height", imageBBox.height + "px")

// scale polygons
      svg.selectAll("polygon").attr('transform', `scale(${scalingFactor})`)
    }
    
    function initializeEvents() {
      var svg = d3.select("svg");
      svg.selectAll("polygon").on("click", function() {
        alert(this.id);
      });
         
      window.onresize = function(event) {
        draw();
      };
    }
    
    draw();
    initializeEvents();
    
  </script>
</body>

https://d3js.org/d3.v4.min.js