SVG with raster img keep AR

by tmtron

HTML

<div id="container">

 <img id="htmlImg" style="width: 100%; display: visible"  
    src ="http://placehold.it/1920x1080" />
   

 <!--
 
 preserveAspectRatio="xMinYMin meet"
  preserveAspectRatio="none"
  width="100%" height="100%"
 -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="100%" height="100%" 
  >
    <g class="hover_group" opacity="0.4">
      <a xlink:href="http://www.wooh.be/shop/mobilier/wooh-original-office-home/giroflex-353.html">
        <rect x="100" y="200" opacity="0.5" fill="red" width="264.6" height="387.8"></rect>
      </a>
    </g>
    <rect x="20%" y="40%"  fill="green" width="10%" height="20%" style="z-index: -1"></rect>
    <text x="0" y="60%" class="text">TextDescr</text> 
  </svg>



</div>

CSS

.hover_group:hover {
  opacity: 1;
}
/*
.backgroundImg {
  width: 100%;
  height: 100%;
}
*/

.text {
  font: italic 32px serif;
  fill: blue;
}

svg {
 border: 2px solid red;  
}

#container {
/*  overflow: hidden;
  resize: both;
  height: auto; //200px;
  min-height: 100px;
*/
  position: relative;
  width: 100%;
  border: 2px solid;
}

#container svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

JavaScript

function imgLoaded(event) {
//	const img = document.getElementById('img');
  const bbox = event.target.getBBox();
	console.log('loaded', bbox.width, bbox.height)
  const img = event.target;
  img.setAttribute("width", "100%");
}