How to control height in responsive svg image map with PNG image background-CodePudding

I have an SVG image map on top of a PNG. I have enclosed the image map in a DIV but notice that the image map does not care about the height of the DIV. No matter how I style the enclosing DIV, the image map seems to ignore it and overflows. Here is the map.

https://asle.benoni.no/static/maptest/

If I try to change the width and height of the PNG image it dissapears. I want to fit this image in e.g. 100% height so it fits inside the DIV container. So I can only control the width og the enclosing DIV but not the height. How do I control the height?

Here is the code I am using:

<div >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1052 1314" preserveAspectRatio="none">
  <image width="100%" height="100%" xlink:href="rutenr.png"></image><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1020.html">
    <rect x="327" y="144" fill="#fff" opacity="0.2" width="58" height="58"></rect>
  </a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1520.html">
    <rect x="384" y="143" fill="#fff" opacity="0.2" width="58" height="58"></rect>
  </a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM3025.html">
    <rect x="555" y="89" fill="#fff" opacity="0.2" width="58" height="58"></rect>

...and the rest of the areas after this.

The image map is now responsive in the way that when I resize the window, the clickable areas are correct no matter if I resize the window. But I have no control over e.g. the height of the image map.

CodePudding user response：

You can set the height to 100% of the height of the viewport.

svg {
  height: 100vh;
}

<div >
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1052 1314" preserveAspectRatio="none">
  <image width="100%" height="100%" xlink:href="https://asle.benoni.no/static/maptest/rutenr.png"></image><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1020.html">
    <rect x="327" y="144" fill="#fff" opacity="0.2" width="58" height="58"></rect>
  </a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1520.html">
    <rect x="384" y="143" fill="#fff" opacity="0.2" width="58" height="58"></rect>
  </a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM3025.html">
    <rect x="555" y="89" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</svg>
</div>

Or do the same with the .map and set the height of the SVG to 100%:

.map {
  height: 100vh;
}
svg {
  height: 100%;
}